<!DOCTYPE html>
<html lang="zh-CN" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>龙陌的博客</title>
    <meta name="description" content="基于vite为基础搭建的风格脚手架,提供多种模板以便于更高效的解决业务需求！">
    <meta name="generator" content="VitePress v1.0.1">
    <link rel="preload stylesheet" href="/long-press/assets/style.BL65bImA.css" as="style">
    
    <script type="module" src="/long-press/assets/app.CKtEL6mi.js"></script>
    <link rel="preload" href="/long-press/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
    <link rel="modulepreload" href="/long-press/assets/chunks/framework.Cp_of1Ge.js">
    <link rel="modulepreload" href="/long-press/assets/chunks/theme.hH2tFlJ7.js">
    <link rel="modulepreload" href="/long-press/assets/chunks/PageInfo.vue_vue_type_script_setup_true_lang.9LRWY4ho.js">
    <link rel="modulepreload" href="/long-press/assets/chunks/dayjs.min.BrPrGVY0.js">
    <link rel="modulepreload" href="/long-press/assets/css3_现代web布局_09.md.CJg03gvR.lean.js">
    <link rel="icon" type="image/svg+xml" href="logo.ico">
    <meta name="author" content="龙陌">
    <meta name="referrer" content="no-referrer">
    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-4c760b95><!--[--><!--]--><!--[--><span tabindex="-1" data-v-16c53dd7></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-16c53dd7> Skip to content </a><!--]--><!----><header class="VPNav" data-v-4c760b95 data-v-0a463f3f><div class="VPNavBar has-sidebar top" data-v-0a463f3f data-v-460dba10><div class="wrapper" data-v-460dba10><div class="container" data-v-460dba10><div class="title" data-v-460dba10><div class="VPNavBarTitle has-sidebar" data-v-460dba10 data-v-ef777607><a class="title" href="/long-press/" data-v-ef777607><!--[--><!--]--><!--[--><img class="VPImage logo" src="/long-press/logo.ico" alt data-v-9cb742f0><!--]--><span data-v-ef777607>龙陌的博客</span><!--[--><!--]--></a></div></div><div class="content" data-v-460dba10><div class="content-body" data-v-460dba10><!--[--><!--]--><div class="VPNavBarSearch search" data-v-460dba10><!----><div id="docsearch"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><span class="DocSearch-Button-Key">Meta</span><span class="DocSearch-Button-Key">K</span></span></button></div></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-460dba10 data-v-b298d4fd><span id="main-nav-aria-label" class="visually-hidden" data-v-b298d4fd>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>💻 首页</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/guide/" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>💡 指南</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/tools/" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>🔧 编程工具</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/utils/" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>🔧 常用工具类</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/standard/" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>📋 前端规范</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/react/React实战,设计模式与最佳实践/" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>⭐ React</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/typescript/" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>⭐ TypeScript</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/css3/" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>⭐ Css3</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/electron/" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>⭐ Electron</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/linux/linux%E5%B8%B8%E7%94%A8%E5%91%BD%E4%BB%A4" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>⭐ Linux</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-460dba10 data-v-815abbf3><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-815abbf3 data-v-34066301 data-v-b6ab5a8a><span class="check" data-v-b6ab5a8a><span class="icon" data-v-b6ab5a8a><!--[--><span class="vpi-sun sun" data-v-34066301></span><span class="vpi-moon moon" data-v-34066301></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-460dba10 data-v-a0947e71 data-v-2fe70121><!--[--><a class="VPSocialLink no-icon" href="https://vitepress.vuejs.org/guide/getting-started" aria-label="github" target="_blank" rel="noopener" data-v-2fe70121 data-v-39684c0a><span class="vpi-social-github" /></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/248956095" aria-label target="_blank" rel="noopener" data-v-2fe70121 data-v-39684c0a><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-460dba10 data-v-b81df352 data-v-603fa601><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-603fa601><span class="vpi-more-horizontal icon" data-v-603fa601></span></button><div class="menu" data-v-603fa601><div class="VPMenu" data-v-603fa601 data-v-61aada2f><!----><!--[--><!--[--><!----><div class="group" data-v-b81df352><div class="item appearance" data-v-b81df352><p class="label" data-v-b81df352>外观</p><div class="appearance-action" data-v-b81df352><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-b81df352 data-v-34066301 data-v-b6ab5a8a><span class="check" data-v-b6ab5a8a><span class="icon" data-v-b6ab5a8a><!--[--><span class="vpi-sun sun" data-v-34066301></span><span class="vpi-moon moon" data-v-34066301></span><!--]--></span></span></button></div></div></div><div class="group" data-v-b81df352><div class="item social-links" data-v-b81df352><div class="VPSocialLinks social-links-list" data-v-b81df352 data-v-2fe70121><!--[--><a class="VPSocialLink no-icon" href="https://vitepress.vuejs.org/guide/getting-started" aria-label="github" target="_blank" rel="noopener" data-v-2fe70121 data-v-39684c0a><span class="vpi-social-github" /></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/248956095" aria-label target="_blank" rel="noopener" data-v-2fe70121 data-v-39684c0a><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-460dba10 data-v-156ee799><span class="container" data-v-156ee799><span class="top" data-v-156ee799></span><span class="middle" data-v-156ee799></span><span class="bottom" data-v-156ee799></span></span></button></div></div></div></div><div class="divider" data-v-460dba10><div class="divider-line" data-v-460dba10></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-4c760b95 data-v-bc5dff2d><div class="container" data-v-bc5dff2d><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-bc5dff2d><span class="vpi-align-left menu-icon" data-v-bc5dff2d></span><span class="menu-text" data-v-bc5dff2d>归档</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-bc5dff2d data-v-fe28bfa1><button data-v-fe28bfa1>返回顶部</button><!----></div></div></div><aside class="VPSidebar" data-v-4c760b95 data-v-e1756f1c><div class="curtain" data-v-e1756f1c></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-e1756f1c><span class="visually-hidden" id="sidebar-aria-label" data-v-e1756f1c> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-e1756f1c><section class="VPSidebarItem level-0 collapsible has-active" data-v-e1756f1c data-v-b147bcc8><div class="item" role="button" tabindex="0" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><h2 class="text" data-v-b147bcc8>现代web布局</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b147bcc8><span class="vpi-chevron-right caret-icon" data-v-b147bcc8></span></div></div><div class="items" data-v-b147bcc8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/css3/%E7%8E%B0%E4%BB%A3web%E5%B8%83%E5%B1%80/01" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>Web 布局技术演进：了解 Web 布局发展史</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/css3/%E7%8E%B0%E4%BB%A3web%E5%B8%83%E5%B1%80/02" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>现代 Web 布局技术术语</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/css3/%E7%8E%B0%E4%BB%A3web%E5%B8%83%E5%B1%80/03" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>Flexbox 布局基础使用</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/css3/%E7%8E%B0%E4%BB%A3web%E5%B8%83%E5%B1%80/04" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>Flexbox 布局中的对齐方式</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/css3/%E7%8E%B0%E4%BB%A3web%E5%B8%83%E5%B1%80/05" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>Flexbox 布局中的 flex 属性的基础运用</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/css3/%E7%8E%B0%E4%BB%A3web%E5%B8%83%E5%B1%80/06" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>Flexbox 中的计算：通过扩展因子比例来扩展 Flex 项目</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/css3/%E7%8E%B0%E4%BB%A3web%E5%B8%83%E5%B1%80/07" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>Flexbox 中的计算：通过收缩因子比例收缩 Flex 项目</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/css3/%E7%8E%B0%E4%BB%A3web%E5%B8%83%E5%B1%80/08" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>Flexbox 布局中的 flex-basis：谁能决定 Flex 项目的大小？</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/css3/%E7%8E%B0%E4%BB%A3web%E5%B8%83%E5%B1%80/09" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>使用 Flexbox 构建经典布局：10 种经典 Web 布局</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/css3/%E7%8E%B0%E4%BB%A3web%E5%B8%83%E5%B1%80/10" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>10</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-e1756f1c><section class="VPSidebarItem level-0 collapsible" data-v-e1756f1c data-v-b147bcc8><div class="item" role="button" tabindex="0" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><h2 class="text" data-v-b147bcc8>postcss</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b147bcc8><span class="vpi-chevron-right caret-icon" data-v-b147bcc8></span></div></div><div class="items" data-v-b147bcc8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/css3/postcss/postcss-prefix-selector%E5%A2%9E%E5%8A%A0%E7%BB%9F%E4%B8%80%E4%BD%9C%E7%94%A8%E5%9F%9F" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>postcss-prefix-selector增加统一作用域</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-4c760b95 data-v-308553a0><div class="VPDoc has-sidebar has-aside" data-v-308553a0 data-v-e512d8d8><!--[--><!--]--><div class="container" data-v-e512d8d8><div class="aside" data-v-e512d8d8><div class="aside-curtain" data-v-e512d8d8></div><div class="aside-container" data-v-e512d8d8><div class="aside-content" data-v-e512d8d8><div class="VPDocAside" data-v-e512d8d8 data-v-bca3b04c><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-bca3b04c data-v-ff0b6666><div class="content" data-v-ff0b6666><div class="outline-marker" data-v-ff0b6666></div><div class="outline-title" role="heading" aria-level="2" data-v-ff0b6666>本页目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-ff0b6666><span class="visually-hidden" id="doc-outline-aria-label" data-v-ff0b6666> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-ff0b6666 data-v-69d389fc><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-bca3b04c></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-e512d8d8><div class="content-container" data-v-e512d8d8><!--[--><!--]--><main class="main" data-v-e512d8d8><div style="position:relative;" class="vp-doc _long-press_css3_%E7%8E%B0%E4%BB%A3web%E5%B8%83%E5%B1%80_09" data-v-e512d8d8><div><p>Flexbox 是现代 Web 布局的主流技术之一，它提供了一种有效的方式来<strong>定位</strong> 、<strong>排序</strong> 和 <strong>分布</strong>元素，即使在视窗或元素大小不明确或动态变化时亦是如此。Flexbox 的优势可以用一句话来表达：“<strong>在不需要复杂的计算之下，元素的大小和顺序可以灵活排列</strong> ”，即“Flexbox 为您提供了元素大小和顺序的灵活性”。如此一来，可以让 Web 的布局变得简单地多。</p><p>在这节课程中，我将介绍如何使用 Flexbox 来构建 Web 中的一些经典布局（实践中常使用的 Web 布局）。这些布局在还没有 Flexbox 技术之前就在 Web 中很常见，比如<strong>等高布局</strong> 、<strong>分屏</strong> （或<strong>等分列</strong> ）、<strong>水平垂直居中</strong> 、<strong>Sticky Footer</strong> 、<strong>圣杯布局</strong> 和 <strong>Grid Frameworks（简单的网格系统）</strong> 等，只不过我们在使用以往的 Web 布局技术，比如浮动（<code>float</code>）、定位（<code>position</code>）和内联块（<code>display:inline-block</code>）等实现会比较困难，甚至还需要一定的 CSS 黑魔法（Hack 手段），但使用 Flexbox 就会显得容易得多。</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7719eacf03f94609a99f2afdc714846c~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>在开始之前，我用一张图来帮助大家回忆一下前面几个有关于 Flexbox 课程的知识，（👇 <strong>点击查看大图</strong>）：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ff98355476f7467b84c9e078f90de1c2~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><h2 id="水平垂直居中" tabindex="-1">水平垂直居中 <a class="header-anchor" href="#水平垂直居中" aria-label="Permalink to &quot;水平垂直居中&quot;">​</a></h2><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8c01198ca4dc464bb97deb46bed24b2c~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>可以说，水平垂直居中在 Web 上的运用是随处可见，比如一个 Icon 图标在其容器中水平垂直居中，一个标题在导航栏中水平垂直居中。 CSS 中，可以实现水平垂直居中的技术方案也有很多种，至少不会少于十种不同的技术方案。不过，这里我们主讲 Flexbox 如何实现水平垂直居中。</p><p>首先，水平垂直居中常见的效果有两种，单行（或单列）水平垂直居中和多行（或多列）水平垂直居中。它对应的 HTML 结构可能会像下面这样：</p><div class="language-HTML vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">HTML</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">&lt;!-- 单行（或单列）水平垂直居中 --&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;container container--single&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">img</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> src</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;avatar.png&quot;</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> alt</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;需要在容器中水平垂直居中&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">&lt;!-- 多行（或多列）水平垂直居中 --&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;container container--multiple&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#CD3131;--shiki-dark:#E06C75;">imag</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> src</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;avatar&quot;</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> alt</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;我们要水平垂直居中&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">h3</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">大漠|W3cplus.com</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">h3</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">p</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">掘金小册.现代Web布局</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">p</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><p>在 Flexbox 中，可以在 Flex 容器上使用：</p><ul><li><code>justify-content</code> 的 <code>center</code> 让 Flex 项目水平居中。</li><li>对于单行而言，可以使用 <code>align-items</code> 的 <code>center</code> 让 Flex 项目垂直居中；当然，使用 <code>align-content</code> 的 <code>center</code> 也可以让 Flex 项目垂直居中，但需要显式设置<code>flex-wrap</code> 的值为 <code>wrap</code> 或 <code>wrap-reverse</code>。</li><li>对于多行而言（<code>flex-direction</code> 显式设置了 <code>column</code>），则使用 <code>align-items</code> 的 <code>center</code> 让所有 Flex 项目水平居中，再配合 <code>justify-content</code> 的 <code>center</code> 实现垂直方向居中</li></ul><p>在 CSS 中，我们可以像下面这样编码，可以轻易实现水平垂直居中：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">flex</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">; </span><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">/* inline-flex */</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">/* 单行(或单列)水平垂直居中 */</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container--single</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">   justify-content</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">center</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">; </span><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">/* 水平居中 */</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> </span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">   align-items</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">center</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;     </span><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">/* 垂直居中 */</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">/* 多行（或多列）水平垂直居中 */</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container--multiple</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    flex-direction</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">column</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    align-items</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">center</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;     </span><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">/* 水平居中 */</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    justify-content</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">center</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">; </span><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">/* 垂直居中 */</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3ad5d7986528497db38416b4b3d92a2e~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/rNvpYJW" target="_blank" rel="noreferrer">https://codepen.io/airen/full/rNvpYJW</a></p></blockquote><p>单行或多行实现水平垂直居中，两者都可以在 Flex 容器上设置 <code>justify-content</code> 和 <code>align-items</code> 属性的值为 <code>center</code> ，不同的是，在多行的 Flex 容器上要显式设置 <code>flex-direction</code> 属性的值为 <code>column</code> 。</p><p>你还可以将 <code>justify-content</code> 和 <code>align-self</code> 配合起来实现水平垂直居中的效果：</p><ul><li>Flex 容器上设置 <code>justify-content</code> 的值为 <code>center</code> ，让 Flex 项目实现水平居中；</li><li>Flex 项目上（需要实现垂直居中的 Flex 项目）上设置 <code>align-self</code> 的值为 <code>center</code> 。</li></ul><p>比如：</p><div class="language-HTML vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">HTML</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;container&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">   &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;item&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(^_^)</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.container {</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">    display: flex; /* 或 inline-flex */</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">    justify-content: center;  /* Flex 项目水平居中 */</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.item {</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">    align-self: center;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/906e102c13a24fc0bd8fa79a48d41b4b~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址：<a href="https://codepen.io/airen/full/abGqoqo" target="_blank" rel="noreferrer">https://codepen.io/airen/full/abGqoqo</a></p></blockquote><p>注意，从效果上可以看得出来，如果在 Flex 项目上未显式设置 <code>align-self:center</code> 时，Flex 项目会被拉伸，这是因为 Flex 容器的 <code>align-items</code> 默认值为 <code>stretch</code> 。如果你需要避免 Flex 项目在侧轴被拉伸，可以重置 <code>align-items</code> 的值为 <code>stretch</code> 之外的值。</p><p>这种方法也同样适用于多行或多列水平垂直居中：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">flex</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    justify-content</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">center</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> &gt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;"> *</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    align-self</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">center</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container--multiple</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    flex-direction</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">column</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e3017e1bb31f44908b346672802ee472~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/bGMLbzK" target="_blank" rel="noreferrer">https://codepen.io/airen/full/bGMLbzK</a></p></blockquote><p>如果实现单个元素（Flex 项目）在 Flex 容器中水平垂直居中，你还可以使用 <code>justify-content</code> 和 <code>align-content</code> 两者的简写属性 <code>place-content</code> ，并且将其设置为 <code>center</code>，但需要配合 <code>flex-wrap</code> 属性来使用，一般设置为 <code>wrap</code> ：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">flex</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    flex-wrap</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">wrap</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    place-content</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">center</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">    </span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">    /* 等同 */</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    justify-content</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">center</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    align-content</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">center</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c5c69c3d7a8841f383e11fefc07e2ea8~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址：<a href="https://codepen.io/airen/full/zYjRYGv" target="_blank" rel="noreferrer">https://codepen.io/airen/full/zYjRYGv</a></p></blockquote><p>在特定场景或环境之下，这种方式也适用于多行水平垂直居中，比如 Flex 容器没有足够空间致使 Flex 项目断行：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5ce6793707ed43f2806a19514d86f6a1~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>虽然使用一些 Hack 手段可以避免上图这样的现象出现，但这样的 Hack 手段会让 Web 布局失去一定的灵活性，在实际开发的过程中不建议这样使用。除非你能提前预判：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> &gt;</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;"> .title</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  flex</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 0</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 100</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  text-align</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">center</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  white-space</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">nowrap</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3f5ca83d6e594ede95f9e8b8d03afd44~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo: <a href="https://codepen.io/airen/full/poVaoEM" target="_blank" rel="noreferrer">https://codepen.io/airen/full/poVaoEM</a></p></blockquote><p>如果你实在需要使用 <code>place-content</code> 来让元素水平垂直居中的话，可以考虑和 <code>place-items</code> 结合起来使用，即：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">flex</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    place-content</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">center</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    place-items</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">center</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">    </span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">    /* place-content 等同于 */</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    justify-content</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">center</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    align-content</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">center</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">    </span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">    /* place-items 等同于 */</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    align-items</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">center</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    justify-items</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">center</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><p>对于多个 Flex 项目时，需要在 Flex 容器显式设置 <code>flex-direction: column</code> 。其实它和前面的 <code>justify-content</code> 和 <code>align-items</code> 取值 <code>center</code> 是一样的原理，只不过这里使用了其简写属性。</p><p>我们前面的课程有介绍过，在 Flexbox 布局中，你可以在 Flex 项目上设置 <code>margin</code> 的值为 <code>auto</code> 来控制 Flex 项目位置：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ad6d0b9521444746980f89b38a99a519~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>也就是说，如果你只是想控制单个 Flex 项目在 Flex 容器中水平垂直居中的话，使用 <code>margin:auto</code> 也是一种不错的选择：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">flex</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.item</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    margin</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">auto</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/597d875282984f93bdc90d1f456dd7a6~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/JjvpjLy" target="_blank" rel="noreferrer">https://codepen.io/airen/full/JjvpjLy</a></p></blockquote><p>你可以在 Flexbox 布局中使用不同的方式来实现水平垂直居中的效果，至于选择哪一种方案，可以根据实际情况来选择。如果你实在不知道如何选择，还可以借助浏览器调试工具来辅助你快速选择：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a3fbdb55eef2475f8e4eb26eb07002cf~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>留个小作业，请使用 Flexbox 来实现 Logo 图标在其容器中水平垂直居中：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/36524057468a4a87bc4c37c460e069e5~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><h2 id="等高布局" tabindex="-1">等高布局 <a class="header-anchor" href="#等高布局" aria-label="Permalink to &quot;等高布局&quot;">​</a></h2><p>Web 设计师为了让页面或组件的 UI 更美观，往往会考虑像等高布局这样的效果：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/562140b9b64a4d5ab8a459dd5ac43d2a~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>如上图所示，右侧等高布局看起来总是要比左侧的不等高布局更舒服一些。虽然等高布局在 UI 上会令人感到更舒服，但在以往的布局技术中要实现等高布局还是有点麻烦的。</p><p>主要原因是<strong>我们并不知道元素的高度是多少</strong> ，即使知道了，如果给元素上直接设置一个 <code>height</code> 值，很有可能就会造成内容溢出容器，甚至是打破 Web 布局。那么，使用 Flexbox （包括后面要介绍的 Grid）布局技术，实现等高布局就会轻易地多，甚至可以说是没有任何难度可言。比如，我们要实现一个等高布局的卡片组件：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2a4eb84cb8c74a60a54c3722efef95f8~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>上图中的三张卡片排列在一起，它们：</p><ul><li>每一张卡片的视觉高度相等（列高相等），并且取最大的列；</li><li>每一张卡片有相同的宽度，也可以自适应；</li><li>每一张卡片都有<strong>缩略图</strong> 、<strong>标题</strong> 、<strong>描述文本</strong>和一个<strong>按钮</strong> ，并且卡片缩略图大小是相等的，而且按钮不管卡片标题和描述文本的长短，<strong>始终位于卡片底部</strong>。</li></ul><p>如果不采用 Flexbox 布局技术方案，当未给卡片设置一个最小高度时，往往实现的效果会像下图这样：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b8cb1a029a484b96a750f61638438f51~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>如果使用 Flexbox 布局技术，实现起来就很简单：</p><div class="language-HTML vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">HTML</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;cards&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;card&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">        &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">figure</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">            &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">img</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> src</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;thumb.png&quot;</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> alt</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;缩略图&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">        &lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">figure</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">        &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">h3</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">Card Title</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">h3</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">        &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">p</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">Card Describe</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">p</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">        &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">button</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">Button</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">button</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">    &lt;!-- 其他 Card --&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><p>与布局相关的 CSS 代码：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.cards</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">flex</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  flex-wrap</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">wrap</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  gap</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">rem</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.card</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">flex</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  flex-direction</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">column</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  flex</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 1</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 300</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><p>在这个示例中，卡片<code>.card</code> 和其容器 <code>.cards</code> 都是 Flex 容器，并且每张卡片的初始化尺寸是 <code>300px</code> （即 <code>flex-basis</code> 的值为 <code>300px</code>），而且容器 <code>.cards</code> 无法容纳所有卡片 <code>.card</code> 时，它会自动换行，并且最后一个卡片宽度变宽了，这是因为卡片 <code>.card</code> 设置了<code>flex-grow:1</code> 。</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d2fb01b8e6df41a98827da197e2b950c~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>你可能会感到好奇，为什么会这样，又将如何解决？接下来的内容中你会找到答案。我们回到等高布局中来，你可能已经发现了，只要告诉浏览器卡片容器 <code>.cads</code> 是一个 Flex 容器，那么所有卡片 <code>.card</code> 的高度就相等了，而且会以最高的那张卡片为主：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/24870361a4b044b2a31cbb560f9ec5be~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>这是因为，Flex 容器 <code>.cards</code> 的 <code>align-items</code> 属性的默认值是 <code>stretch</code> ，如果没有调整 <code>align-items</code> 属性的值，那么该容器中的所有子元素（即 Flex 项目 <code>.card</code>）在侧轴方向就会被拉伸，并且等于侧轴尺寸。反之，就会得到一个不等高的卡片，比如，你在 <code>.cards</code> 上显式设置了 <code>align-items</code> 的值为 <code>flex-start</code> ，你将看到的效果如下：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.cards</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    align-items</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">flex-start</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/43522adf07c24fa4acf69692d7218970~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>也就是说，<strong>默认情况之下，Flex 容器中的所有 Flex 项目都是相等的</strong> ，这也是 Flexbox 实现等高布局很容易的主要原因。</p><p>虽然说，将 <code>.cards</code> 创建为一个 Flex 容器就实现了卡片等高的效果，但这个效果还不是设计师所期待的，比如第二和第三张卡，因卡片标题和描述内容比第一张卡片更少，造成按钮偏上，卡片底部留下一定的空白空间（设计师期望的是，所有卡片的按钮都能在底部对齐）：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/783ac5bc36714bd48fd5c8e89eca0e80~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>要实现上图左侧的效果，在 Flexbox 布局中也有多种方式，比如我们这个示例，每张卡片 <code>.card</code> 本身就是一个 Flex 容器，你只需要将剩余空间分配给卡片中的 <code>p</code> 元素（描述文本）即可，就是将其 <code>flex-grow</code> 值设置为 <code>1</code> ：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.card</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;"> p</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    flex-grow</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6feb2bd16cc64635849125b1041cd6f3~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/VwxQLyj" target="_blank" rel="noreferrer">https://codepen.io/airen/full/VwxQLyj</a></p></blockquote><p>除了上面这种方案之外，还可以在 <code>button</code> 元素显式设置 <code>margin-top</code> 的值为 <code>auto</code> ：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.card</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;"> button</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    margin-top</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">auto</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5c0127ba822b4d64bb8d7337cb36c6c6~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/PoeQPVL" target="_blank" rel="noreferrer">https://codepen.io/airen/full/PoeQPVL</a></p></blockquote><p>如果你不希望按钮宽度占满整个卡片，还可以改变 <code>button</code> 的 <code>algin-self</code> 值，比如：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">/* 按钮居左 */</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.card</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;"> button</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    align-self</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">flex-start</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">; </span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">/* 按钮居右 */</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.card</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;"> button</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    align-self</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">flex-end</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>你将得到下面这样的效果：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7242fb19032e44399869fbd7c478aab7~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>小作业，请使用 Flexbox 布局技术，实现一个等高布局的 Web 页面：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/feaf995a0ce4422294cf1668f5da8143~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>简单化一下：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/28925d530dfc4b83a1cd2054e49fff6b~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><h2 id="均分列-等分列-布局" tabindex="-1">均分列（等分列）布局 <a class="header-anchor" href="#均分列-等分列-布局" aria-label="Permalink to &quot;均分列（等分列）布局&quot;">​</a></h2><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/62633b76141b42afa2ed9a2a87d26658~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>正如上图所示，在 Web 中均分列的布局效果很多，尤其是在移动端的开发当中，底部的菜单栏中的列大多都是均分的。</p><blockquote><p><strong>均分列又称为等分列或等列，它的最大特征就是列的宽度是相等的</strong> ！</p></blockquote><p>以往 CSS 实现等分列都是通过百分比来计算，比如：</p><ul><li>列数（<code>--column</code>）；</li><li>列间距（<code>--gap</code>）。</li></ul><p>一般情况下，列宽就是：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">列宽 = （容器宽度 - （列数 - 1）× 列间距）÷ 列数</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>假设是一个三列，列间距为<code>0</code>，那么每列的宽度将会是：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.coumn</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">    /**</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">     * 容器宽度 ➜ 100%</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">     * 列数    ➜ --columns = 3</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">     * 列间距  ➜  --gap = 0</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">     * 列宽 = ((100% - (3 - 1)  × 0) ÷ 3 = 33.3333% </span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">    **/</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    width</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">33.33333</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">; </span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>或者使用 <code>calc()</code> 函数和 CSS 的自定义属性结合：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#56B6C2;">:root</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#E06C75;">    --container-width</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">100</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">; </span><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">/* 容器宽度 */</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#E06C75;">    --columns</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">3</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;            </span><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">/* 列数 */</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#E06C75;">    --gap</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">0</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> ;               </span><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">/* 列间距 */</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.column</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    width</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#795E26;--shiki-dark:#56B6C2;">calc</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">((</span><span style="--shiki-light:#795E26;--shiki-dark:#56B6C2;">var</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">--container-width</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">) </span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">-</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> (</span><span style="--shiki-light:#795E26;--shiki-dark:#56B6C2;">var</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">--columns</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">) </span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">-</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 1</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">) * </span><span style="--shiki-light:#795E26;--shiki-dark:#56B6C2;">var</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">--gap</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">)) / var(</span><span style="--shiki-light:#E50000;--shiki-dark:#E06C75;">--columns</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">));</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>但不管是哪种方式，开发者都需要提前知道等分的列数、列间距等，对于构建一个动态的等分列，上面方案的缺陷就出来了。<strong>开发者需要不断地去做数学计算，而且是需要知道参数的情况之下才行</strong> 。</p><p>如果换成 Flexbox 技术来构建的话，开发者就不需要去考虑这些参数了。比如下面这个移动端的底部工具栏的效果：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b5e7069ceed440eba14e4bcb05f54468~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>构建它的 HTML 结构并不复杂：</p><div class="language-HTML vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">HTML</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">footer</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;item&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">        &lt;</span><span style="--shiki-light:#CD3131;--shiki-dark:#E06C75;">Icon</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;"> /&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> Icon name</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">    &lt;!-- 省略其他的菜单项 --&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">footer</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">footer {</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">    display: flex;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.item {</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">    flex: 1;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">    min-width: 0; /* 这行代码很重要 */</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">/* 菜单项图标和文字的布局 */</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.item {</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">    display: inline-flex;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">    flex-direction: column;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">    align-items: center;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">    justify-content: center;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">    gap: 5px;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5d145c42cec042f185896965b53644d2~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/GRdQZYv" target="_blank" rel="noreferrer">https://codepen.io/airen/full/GRdQZYv</a></p></blockquote><p>使用 <code>flex:1</code> 来均分列（即平均分配 Flex 容器可用空间）并不是完全可以的，它需要配合 <code>min-width:0</code> 一起使用。因为在 Flex 项目上显式设置 <code>flex:1</code> 时已重置了 <code>flex</code> 的初始值（<code>flex: 0 1 auto</code>），浏览器会把 <code>flex:1</code> 计算成：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">flex-grow</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">: 1;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">flex-shrink</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">: 1;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">flex-basis</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">: 0%</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>当 <code>flex-basis</code> 为 <code>auto</code> 时， Flex 项目的宽度是 <code>max-content</code> （除非 Flex 容器空间完全不足）。也就是说，<code>flex:1</code> 时，<code>flex-basis</code> 值从 <code>auto</code> 变成了<code>0%</code> ，这将覆盖 Flex 项目的内在尺寸（<code>min-content</code> ），Flex 项目的基本尺寸现在是 <code>0</code> ，但由于 <code>flex-grow</code> 的存在，Flex 项目会扩展以填补空的空间（Flex 容器的剩余空间）。</p><p>而实际上，在这种情况下，<code>flex-shrink</code> 不再做任何事情，因为所有 Flex 项目现在的宽度都是 <code>0</code> ，并且正在增长以填补可用空间。只不过， Flex 容器有可能存在没有剩余空间的情况，甚至是有不足空间的情况存在。此时，<code>flex:1</code> 也就不能均分 Flex 容器的可用空间。</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c9579e0459c94f988c189573c98fb5b7~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>正如上图所示，最后一个 Flex 项目的宽度要更大，它的 <code>max-content</code> 都比其他 Flex 项目大（它有四个汉字宽）。</p><p>事实上，<strong>默认情况之下，设置了</strong> <strong><code>flex:1</code></strong> <strong>的 Flex 项目在收缩的时候，其宽度不会小于其最小内容尺寸（<strong><strong><code>min-content</code></strong></strong>）。如果要改变这一点，需要显式设置</strong> <strong><code>min-width</code></strong> <strong>（或</strong> <strong><code>min-inline-size</code>）或</strong> <strong><code>min-height</code></strong> <strong>（或</strong> <strong><code>min-block-size</code>）的值</strong>。</p><p>CSS 中它们的值为 <code>auto</code> 时，会被浏览器计算为 <code>0</code> 。但在 Flexbox 中，Flex 项目的 <code>min-width</code> 或 <code>min-height</code> 的值又不会被计算为 <code>0</code> ，它的值被计算为 <code>max-content</code> 。</p><p>为此，要真正达到均分列，只在 Flex 项目上显式设置 <code>flex:1</code> 是不够的，还需要在 Flex 项目上显式设置 <code>min-width</code> 值为 <code>0</code> 。这也就是说，为什么 <code>min-width:0</code> 很重要。</p><p>不过，在使用 <code>flex:1</code> 的时候，需要额外注意的是，这个 <code>1</code> 会被视为 <code>flex-grow</code> 的值。如果你要使用 <code>flex</code> ，更建议的做法是，显式地使用 <code>flex</code> 属性的三个值，比如 <code>flex: 1 1 0%</code> 或 <code>flex: 1 1 100%</code> 。</p><blockquote><p>特别提醒，这里涉及到了 <code>flex</code> 的相关计算，有关于这方面的介绍，可以阅读我们前面课程的 06～08 讲。</p></blockquote><p>小作业，卡片等宽且等高：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6e857f24ee5b4fe0a5e68fc51903dd21~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><h2 id="圣杯布局" tabindex="-1">圣杯布局 <a class="header-anchor" href="#圣杯布局" aria-label="Permalink to &quot;圣杯布局&quot;">​</a></h2><p>圣杯布局（Holy Grail Layout）是 Web 中典型的布局模式。它看上去像下图这样：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2904ccedf47a4d54a320943b95d3b96a~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>就上图而言，这就是一个非常普通的三列布局。对圣杯布局有一定了解的同学都应该知道，构建圣杯布局时，对 HTML 的结构是有一定的要求，即 <strong>主内容为先</strong> 。早期这样做，是让用户在 Web 页面加载缓慢时，就能先看到主内容。</p><div class="language-HTML vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">HTML</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">&lt;!-- HTML --&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">header</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">    &lt;!-- 页头 --&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">header</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">main</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">    &lt;!-- 页面主体，它包含两个侧边栏和一个主内容列 --&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">article</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">        &lt;!-- 页面主内容列，需要排在 nav 和 aside 前面 --&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">article</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">nav</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">        &lt;!-- 侧边导航栏 --&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">nav</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">aside</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">        &lt;!-- 侧边内容栏，比如广告栏 --&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">aside</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">main</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">footer</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">    &lt;!-- 页脚 --&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">footer</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><p>对于经典的圣杯布局，它有：</p><ul><li>页头 <code>&lt;header&gt;</code>；</li><li>页脚 <code>&lt;footer&gt;</code>；</li><li>主内容 <code>&lt;article&gt;</code>；</li><li>左侧边栏 <code>&lt;aside&gt;</code>；</li><li>右侧边栏 <code>&lt;aside&gt;</code>。</li></ul><p>它应该具备的能力：</p><ul><li>在 HTML 文档的源码中，主内容 <code>&lt;article&gt;</code> 要位于两个侧边栏 <code>&lt;aside&gt;</code> 之前；</li><li>页头 <code>&lt;header&gt;</code> 和页脚 <code>&lt;footer&gt;</code> 并没有固定高度，即它们的 <code>height</code> 为 <code>auto</code>，由其内容或相关盒模型属性值（比如 <code>padding</code> 、<code>margin</code> 或 <code>border</code>）决定大小；</li><li>在垂直方向，中间三列（<code>&lt;main&gt;</code>）的高度占据 <code>&lt;header&gt;</code> 和 <code>&lt;footer&gt;</code> 之外的浏览器视窗高度，并且随着内容增多而变高；</li><li>在水平方向，一般情况之下两个侧边栏也是由其内容来决定大小，但多数情况之下会给两个侧边栏设置一个固定宽度，比如左侧边栏是 <code>220px</code> ，右侧边栏是 <code>320px</code> 。中间主内容列 <code>&lt;article&gt;</code> 占据两侧边栏之外的浏览器视窗宽度，并且随着内容增加，不会出现水平滚动条。</li></ul><p>我们来看一个真实的圣杯布局案例：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9ef432a1c8a647ef955746fa8ce67a12~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>实现该页面，你可能需要的 HTML 结构如下：</p><div class="language-HTML vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">HTML</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">header</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">h1</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">W3cplus</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">h1</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">nav</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">        &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">ul</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">            &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">li</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">a</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> href</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">home</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">a</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">li</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">            &lt;!-- 其他导航项 --&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">        &lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">ul</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">nav</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">header</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">main</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">article</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">        &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">h2</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">现代 Web 布局技术</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">h2</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">        &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">p</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">使用 CSS Flexbox 技术构建圣杯布局（Holy Grail Layout）</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">p</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">article</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">aside</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">        &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">h3</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">左侧列</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">h3</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">aside</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">aside</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">        &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">h3</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">右侧列</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">h3</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">aside</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">    </span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">main</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">footer</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">ul</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">        &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">li</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">a</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> href</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;home&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">home</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">a</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">li</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">        &lt;!-- 其他导航项 --&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">ul</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">footer</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br></div></div><p>在没有 CSS 加载的情况之下，你看到的圣杯布局会是下图这样：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e9bce0d4ca284f58b0e14d5f01d5fb06~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p><strong>注意，内容先行的原则</strong> ！</p></blockquote><p>我们可以像下面这样使用 Flexbox 来构建圣杯布局：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">body</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">flex</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  flex-direction</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">column</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  gap</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  min-height</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">100</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">vh</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">main</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  flex</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 1</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 0</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  min-height</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">0</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">flex</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  gap</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">aside</span><span style="--shiki-light:#800000;--shiki-dark:#56B6C2;">:nth-of-type</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">(</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">)</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  order</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">-1</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  min-width</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">220</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  max-width</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">220</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">aside</span><span style="--shiki-light:#800000;--shiki-dark:#56B6C2;">:nth-of-type</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">(</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">2</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">)</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  min-width</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">320</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  max-width</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">320</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">article</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  flex</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 1</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 0</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  min-width</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">0</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">header</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">flex</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  flex-wrap</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">wrap</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  align-items</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">center</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  justify-content</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">space-between</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">footer</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">flex</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  justify-content</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">center</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br></div></div><p>可以结合 CSS 的媒体查询，在小屏幕下调整布局，构建一个具有响应式能力的圣杯布局：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">@media</span><span style="--shiki-light:#0451A5;--shiki-dark:#ABB2BF;"> screen</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> and</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> (</span><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">max-width</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">800</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">) {</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">  main</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    flex-direction</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">column</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">  }</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">  main</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;"> aside</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    width</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">100</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    max-width</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">none</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;"> !important</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">  }</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">  aside</span><span style="--shiki-light:#800000;--shiki-dark:#56B6C2;">:nth-of-type</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">(</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">)</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    order</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">  }</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6e4af644a35b4e9dacd26576b7286c02~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址：<a href="https://codepen.io/airen/full/YzLeRZx" target="_blank" rel="noreferrer">https://codepen.io/airen/full/YzLeRZx</a></p></blockquote><p>小作业，使用 Flexbox 构建下图这样的 Web 布局：</p><ul><li>主内容列能随浏览器视窗大小改变；</li><li>侧边栏固定宽度；</li><li>页头和页脚高度由内容决定。</li></ul><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2bbab70579ea45fbacc5eff348f72863~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><h2 id="sticky-footer-布局" tabindex="-1">Sticky Footer 布局 <a class="header-anchor" href="#sticky-footer-布局" aria-label="Permalink to &quot;Sticky Footer 布局&quot;">​</a></h2><p>首先用下图来解释什么是 Sticky Footer 布局:</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ec3967489822463985ef32323a5804fb~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>页脚（Footer）的位置会随着页头（Header）和主内容（Content）高度而变化，但当页头和主内容内容较小，其高度总和小于浏览器视窗高度时，页脚要始终位于浏览器视窗底部。</p><p>对于 Sticky Footer 的布局，使用 Flexbox 再容易不过了，只需要保持主内容容器（它也是一个 Flex 项目）能随着它的父容器（Flex 容器）的剩余空间扩展。简单地说，给主内容设置一个 <code>flex-grow</code> 值为 <code>1</code> 即可。具体代码如下：</p><div class="language-HTML vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">HTML</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">body</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">header</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">header</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">main</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">main</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">footer</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">footer</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">body</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">body {</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">    min-height: 100vh;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">    display: flex;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">    flex-direction: column;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">main {</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">    flex-grow: 1;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><p>如果你不希望浏览器视窗高度较小时，主内容的高度进行收缩，你可以将其 <code>flex-shrink</code> 设置为 <code>0</code> ，比如：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">main</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    flex</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 0</span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;"> auto</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">    </span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">    /* 等同于 */</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    flex-grow</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    flex-shrink</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">0</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    flex-basis</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">auto</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>同样地，为了避免页头和页脚因浏览器视窗高度较小时被挤压，建议在它们上面设置 <code>flex-shrink</code> 值为 <code>0</code> 。</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">body</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    min-height</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">100</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">vh</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">flex</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    flex-direction</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">column</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">header</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">,</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;"> footer</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    flex-shrink</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">0</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">main</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    flex</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 0</span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;"> auto</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    min-height</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">0</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c016d75442d949938e591edd0d4c5136~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/XWqZOao" target="_blank" rel="noreferrer">https://codepen.io/airen/full/XWqZOao</a></p></blockquote><p>除了上面这种方法之外，还可以在 <code>footer</code> 上使用 <code>margin-top:auto</code> 来实现 Sticky Footer 的布局效果：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">body</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    min-height</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">100</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">vh</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">flex</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    flex-direction</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">column</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">body</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> &gt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;"> *</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    flex-shrink</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">0</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">footer</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    margin-top</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">auto</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/063f5253fd884831bde57dd404f327d9~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/RwyQvJG" target="_blank" rel="noreferrer">https://codepen.io/airen/full/RwyQvJG</a></p></blockquote><h2 id="百分百无滚动布局" tabindex="-1">百分百无滚动布局 <a class="header-anchor" href="#百分百无滚动布局" aria-label="Permalink to &quot;百分百无滚动布局&quot;">​</a></h2><p>百分百无滚动布局在 Web 中也是很常见的一种布局，比如下面这样的一个案例（这是一个真实的案例，2019年双11主互动项目中的弹窗）：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3fc9cb0f980645e980395aa1cccb73f8~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p><strong>图中红色虚框中的内容是带有滚动的</strong> 。因为容器的高度是固定的（<code>100vh</code>），内容很有可能会超过容器的高度。</p><p>我把整个弹窗（Modal）分为两个部分：</p><div class="language-HTML vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">HTML</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">&lt;!-- 整个 Modal 高度是 100vh --&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#CD3131;--shiki-dark:#E06C75;">modal</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">modal-header</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">        &lt;!-- 固定高度 --&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">modal-header</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">modal-content</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">        &lt;!-- 滚动容器：flex: 1 --&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">modal-content</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#CD3131;--shiki-dark:#E06C75;">modal</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0c2481b4dbfe4cc09f6c1af2f9671dc8~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>很典型的一个 Flexbox 布局：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">modal</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    height</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">100</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">vh</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">flex</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    flex-direction</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">column</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">modal-header</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    height</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">120</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">; </span><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">/* 一个固定高度值 */</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">modal-content</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    flex</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 1</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 0</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;     </span><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">/* 或 flex: 1*/</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    overflow-y</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">auto</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">; </span><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">/* 内容超过容器高度时出现滚动条 */</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><p>看上去似乎没有问题，但实际上我们在 iOS 系统上触发了一个 Flexbox 的 Bug，就是在<strong>滚动容器上显示设置</strong> <strong><code>overflow-y:scroll</code></strong> <strong>，滚动依旧失效</strong> 。造成这个 Bug 是因为我们上面的 CSS 代码触发了 Flex 项目的边缘情况。如果要避免这个 Bug 的出现，需要对结构做出一定的调整：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b437393646ee44cf8671be0725d11b24~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>对应上图的 HTML 代码如下：</p><div class="language-HTML vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">HTML</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;main-container&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> &lt;!-- flex-direction: column --&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;fixed-container&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">Fixed Container</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">&lt;!-- eg. height: 100px --&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;content-wrapper&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">&lt;!-- min-height: 0, 这个很重要 --&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">        &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;overflow-container&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">&lt;!-- 滚动容器，overflow-y: auto &amp; flex: 1 --&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">            &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;overflow-content&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">Overflow Content</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">&lt;!-- 内容容器 --&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">        &lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>关键的 CSS 代码：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.main-container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">flex</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    flex-direction</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">column</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.fixed-container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    height</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">100</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">; </span><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">/* 固定容器的高度值，任何一个你想的固定值 */</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.content-wrapper</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">flex</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    flex</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;       </span><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">/* 可以是 flex: 1 1 0% */</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    min-height</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">0</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">; </span><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">/* 这个很重要 */</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.overflow-container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    flex</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    overflow-y</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">auto</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">; </span><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">/* 内容超出滚动容器高度时，会出现滚动条 */</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4378590856b44862b5a99a56ea84ac55~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>来看一个具体 Demo 的效果：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f3b8ad871cfe4934bb6bcde391579767~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/JjvpzPY" target="_blank" rel="noreferrer">https://codepen.io/airen/full/JjvpzPY</a></p></blockquote><p>关键部分是 <strong>设置</strong> <strong><code>flex:1</code></strong> <strong>的 Flex 项目需要显式设置</strong> <strong><code>min-height</code></strong> <strong>的值为</strong> <strong><code>0</code></strong> <strong>，即滚动容器的父元素</strong> 。即， <strong>在设置了</strong> <strong><code>flex:1</code></strong> <strong>的 Flex 项目上应该尽可能<strong><strong>地</strong></strong>重置它的最小尺寸值，当主轴在水平方向时（<strong><strong><code>flex-direction: row</code></strong></strong>），设置<code>min-width</code></strong> <strong>（或</strong> <strong><code>min-inline-size</code>）的值为</strong> <strong><code>0</code></strong> <strong>；当主轴在垂直方向时（<strong><strong><code>flex-direction: column</code></strong></strong>），设置</strong> <strong><code>min-height</code></strong> <strong>（或</strong> <strong><code>min-block-size</code>）的值为</strong> <strong><code>0</code></strong> 。</p><p>小作业，使用 Flexbox 构建一个弹窗（Modal）的布局效果：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dce0510ca21647f592509c3c6f481b1a~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><h2 id="_12-列网格布局" tabindex="-1">12 列网格布局 <a class="header-anchor" href="#_12-列网格布局" aria-label="Permalink to &quot;12 列网格布局&quot;">​</a></h2><p>12 列网格布局最早源于 <a href="https://960.gs/" target="_blank" rel="noreferrer">960gs 网格布局系统</a>，它和 CSS 原生的网格系统不是同一个东西。简单地说，960gs 就是将页面分成12列，有列宽和列间距，然后页面的布局划分到具体的列上面，如下图所示：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cf0cb706f6af44b5b266d5d543da42f6~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>早期的 960gs 都是使用 CSS 的浮动（<code>float</code>）来构建的，不过现在很多 CSS 框（CSS Frameworks）中的网格系统都采用 Flexbox 来构建，比如 <a href="https://getbootstrap.com/docs/5.2/layout/grid/" target="_blank" rel="noreferrer">Bootstrap的网格系统</a> 现在就是采用 Flexbox 布局构建的。</p><p>相对而言，使用 Flexbox 技术构建 960gs 网格系统要比浮动技术简单得多，你只需要在一个 Flex 容器放置所需要的列数，每一列对应着一个 Flex 项目。比如：</p><div class="language-HTML vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">HTML</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">&lt;!-- 12列：flex 容器中包含 12 个 flex 项目 --&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">flex-container</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">flex-item</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> 1 of 12</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">flex-item</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">    &lt;!-- 中间省略 10个 flex-item --&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">flex-item</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> 1 of 12</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">flex-item</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">flex-container</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">&lt;!-- 6列： flex 容器中包含 6个 flex 项目 --&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">flex-container</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">flex-item</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> 1 of 6 </span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">flex-item</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">    &lt;!-- 中间省略 4 个 flex-item --&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">flex-item</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">1 of 6 </span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">flex-item</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">flex-container</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">&lt;!-- 4列： flex 容器中包含 4 个 flex 项目 --&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">flex-container</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">flex-item</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> 1 of 4 </span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">flex-item</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">    &lt;!-- 中间省略 2 个 flex-item --&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">flex-item</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">1 of 4 </span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">flex-item</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">flex-container</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">&lt;!-- 3列：flex 容器中包含 3 个 flex 项目 --&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">flex-container</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">flex-item</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> 1 of 3</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">flex-item</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">flex-item</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> 1 of 3</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">flex-item</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">flex-item</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> 1 of 3</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">flex-item</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">flex-container</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">&lt;!-- 2列： flex 容器中包含 2个 flex 项目 --&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">flex-container</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">flex-item</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> 1 of 2</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">flex-item</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">flex-item</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> 1 of 2</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">flex-item</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">flex-container</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br></div></div><p>对于 CSS 而言，主要使用 Flexbox 的 <code>gap</code> 属性来设置列与列之间的间距，然后在 Flex 项目上使用 <code>flex</code> 属性即可，比如：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">flex-container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">flex</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    gap</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#795E26;--shiki-dark:#56B6C2;">var</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">--gap</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">rem</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">)</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">flex-item</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    flex</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 1</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 0</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    min-width</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">0</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">; </span><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">/* 建议加上 */</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9085b09237534c4688a6454cebe95a35~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/qBYxwXK" target="_blank" rel="noreferrer">https://codepen.io/airen/full/qBYxwXK</a></p></blockquote><p>当然，你也可以根据实际需要，给 Flex 项目指定明确的值，即给 Flex 项目的 <code>flex-basis</code> 初始化一个值，同时 <code>flex-grow</code> 和 <code>flex-shrink</code> 都重置为 <code>0</code> ，告诉浏览器，该 Flex 项目不能扩展和收缩：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c4fb3c7f577e4bcc9c7007cbc6efc513~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>比如上图所示：</p><ul><li><code>auto</code> 标记的列，表示 <code>flex</code> 的值为 <code>1 1 0%</code> 或 <code>1 1 auto</code></li><li><code>50%</code> 、<code>33.33%</code> 和<code>25%</code> 标记的列，表示<code>flex-basis</code> 的值为 <code>var(--flex-basis)</code> ，同时 <code>flex-grow</code> 和 <code>flex-shrink</code> 都重置为 <code>0</code></li></ul><p>这样的场景，可以借助 CSS 自定义属性会让你编码更容易一些：</p><div class="language-HTML vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">HTML</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;grid&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;row&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">        &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;column&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">Auto</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">        &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;column&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">Auto</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;row&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">        &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;column&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">Auto</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">        &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;column&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">Auto</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">        &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;column&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">Auto</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;row&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">        &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;column&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">Auto</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">        &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;column&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">Auto</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">        &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;column&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">Auto</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">        &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;column&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">Auto</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;grid&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;row&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">        &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;column fixed&quot;</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> style</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;--flex-basis: 50%&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">50%</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">        &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;column&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">Auto</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">        &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;column&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">Auto</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;row&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">        &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;column fixed&quot;</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> style</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;--flex-basis: 33.33%&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">33.33%</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">        &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;column&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">Auto</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;row&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">        &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;column fixed&quot;</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> style</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;--flex-basis: 25%&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">25%</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">        &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;column&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">Auto</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">        &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;column fixed&quot;</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> style</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;--flex-basis: 33.33%&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">33.33%</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br></div></div><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.grid</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">flex</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    flex-direction</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">column</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    gap</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#795E26;--shiki-dark:#56B6C2;">var</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">--gap-row</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">);</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.row</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">flex</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    gap</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#795E26;--shiki-dark:#56B6C2;">var</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">--gap-column</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">);</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.column</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    flex</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 1</span><span style="--shiki-light:#795E26;--shiki-dark:#56B6C2;"> var</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">--flex-basis</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">0</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">);</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    min-width</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">0</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.column.fixed</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    flex</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">0</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 0</span><span style="--shiki-light:#795E26;--shiki-dark:#56B6C2;"> var</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">--flex-basis</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">);</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><blockquote><p>Demo 地址：<a href="https://codepen.io/airen/full/ZEorZVa" target="_blank" rel="noreferrer">https://codepen.io/airen/full/ZEorZVa</a></p></blockquote><h2 id="九宫格布局" tabindex="-1">九宫格布局 <a class="header-anchor" href="#九宫格布局" aria-label="Permalink to &quot;九宫格布局&quot;">​</a></h2><p>九宫格简单地说就是一个 <code>3 × 3</code> 的网格（三行三列），它也常用于 Web 布局中，而且你可以基于它演变出很多种不同的布局风格：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f747844a3ce840fc962381a2042b0a4a~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>在 Web 布局中，我们把这些布局效果都称为 <strong>九宫格布局</strong> 。它们常被运用于 Web 中展示图片（它有自己的专业术语，称之为<strong>图片墙</strong> <strong>Image Galler</strong> ）。这样的布局对于图片展示来说，可以更好地突出需要展示的图片。</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/db685e4cd7394e3289f5ebf00f356096~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>虽然使用 Flexbox 可以构建一个网格布局，但 Flexbox 布局毕竟是一种<strong>一维布局</strong> ，用它来构建上图这样的九宫格布局效果，还是有一定的局限性，需要通过 HTML 结构强力配合才能实现。比如下面这个示例：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e5044df132544bc58782aa64b5d66e0b~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>实现上图的布局效果，所需要的 HTML 结构可能会像下面这样：</p><div class="language-HTML vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">HTML</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;card&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;card__heading&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">        &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">h3</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;card__title&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">现代 Web 布局</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">h3</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">        &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">p</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;card__describe&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">使用 Flexbox 技术构建九宫格布局</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">p</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;card__grid&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">        &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;card__row&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">            &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;card__column&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">                &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">figure</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">                    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">img</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> src</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;cat.png&quot;</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> alt</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">                &lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">figure</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">            &lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">            &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;card__column&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">                &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">figure</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">                    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">img</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> src</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;cat.png&quot;</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> alt</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">                &lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">figure</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">                &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">figure</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">                    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">img</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> src</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;cat.png&quot;</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> alt</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">                &lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">figure</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">                &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">figure</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">                    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">img</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> src</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;cat.png&quot;</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> alt</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">                &lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">figure</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">                &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">figure</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">                    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">img</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> src</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;cat.png&quot;</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> alt</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">                &lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">figure</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">            &lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">        &lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br></div></div><p>关键的 CSS 代码：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.card</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">flex</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  flex-direction</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">column</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  gap</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">rem</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.card__grid</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">flex</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  flex-direction</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">column</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.card__row</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">flex</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  gap</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">rem</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.card__column</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  flex</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 1</span><span style="--shiki-light:#795E26;--shiki-dark:#56B6C2;"> calc</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">((</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">100</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> -</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 1</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">rem</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">) / </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">2</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">);</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  min-width</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">0</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">flex</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  flex-wrap</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">wrap</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  gap</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">rem</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.card__column</span><span style="--shiki-light:#800000;--shiki-dark:#56B6C2;">:nth-child</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">(</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">2</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">) </span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">figure</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  flex</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 1</span><span style="--shiki-light:#795E26;--shiki-dark:#56B6C2;"> calc</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">((</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">100</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> -</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 1</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">rem</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">) / </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">2</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">);</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  min-width</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">0</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br></div></div><p>这里有一个关键，就是 Flex 项目的 <code>flex-basis</code> 值，使用了 <code>calc()</code> 根据列数和列间距计算得出来的，即：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">列宽（</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">flex-basis</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">） = （100%容器宽度（Flex 容器）- （列数 - 1）× (列间距</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">)</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">）÷ 列数</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>就我们这个示例，是 <code>2</code> 列，列间距是 <code>1rem</code> ，所以 <code>flex-basis</code> 的初始值设置为 <code>calc((100% - 1rem) ``/ 2``)</code> 。最终得到的效果如下：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/613a65775ab34c9fb2f6e7903dace483~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/yLjKzgp" target="_blank" rel="noreferrer">https://codepen.io/airen/full/yLjKzgp</a></p></blockquote><p>你甚至可以使用 12 列网格布局的方式来完成九宫格的布局。但很多时候九宫格布局中的每个元素 （Flex 项目）具有一定的宽高比：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/76550027a2874769b1207bda43642d5a~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>比如上图的布局效果。它是一个由几行组成的布局，而且每行的两张图片都有固定的宽高比。每行的两张图片有相同的高度，并且会填满整行（我们知道每行就是一个 Flex 容器）。图片的宽高比从 <code>16:9</code> 到 <code>3:2</code> 不等。</p><p>自 2021 年开始，你可以在 CSS 中直接使用 <code>aspect-ratio</code> 属性设置元素的宽高比（不需要使用 <code>padding-top</code> 或 <code>padding-bottom</code> 来模拟了）。比如：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.aspect-ratio-box</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    width</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">400</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">    aspect-ratio: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">16</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> / </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">9</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>这样你就可以得到一个宽高比是 <code>16:9</code> 的盒子，浏览器会根据元素的 <code>width</code> 和宽高比 <code>aspect-ratio</code> 的值计算出 <code>height</code> 的值：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/934a411110de4c3e80efb1ca3f150af4~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/oNdqobL" target="_blank" rel="noreferrer">https://codepen.io/airen/full/oNdqobL</a></p></blockquote><p>当然，浏览器也会根据元素的高度 <code>height</code> 值和宽高比 <code>aspect-ratio</code> 的值计算出宽度 <code>width</code> 的值，比如：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.aspect-ratio-box</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">    aspect-ratio: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">16</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> / </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">9</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    height</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">225</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">/* 可以根据 宽高比 和 高度 的值计算出 宽度的值 */</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">aspect-ratio</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> = width ÷ height = 16 ÷ 9 = 1</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.778</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">width = height × </span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">aspect-ratio</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> = 225 x (16 ÷ 9</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">) = 400</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>上面就是 CSS 的 <code>aspect-ratio</code> 属性最基础的使用，有关于它更详细的介绍这里不展开。我们回到示例中来。先把上面的示例简化一下，比如说，在一个 Flex 容器中有两个 Flex 项目，它们的高度是相同的，其中一个 Flex 项目的宽高比是 <code>4:3</code> ，另一个 Flex 项目的宽高比是 <code>2:3</code> 。你可能像下面这样将 <code>aspect-ratio</code> 运用到 Flex 项目上：</p><div class="language-HTML vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">HTML</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;container grid-row&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;item grid-column&quot;</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> style</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;--ratio: 4 / 3&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">4:3</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;item grid-column&quot;</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> style</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;--ratio: 2 / 3&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">2:3</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.container {</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">  display: flex;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">  align-items: flex-start;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.item {</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">  aspect-ratio: var(--ratio);</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">  flex: 1 1 0%;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d6d45da301c949e5b41546ff09888806~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>正如你所见，两个 Flex 项目的宽度相等，但高度不同。你可能会认为将 Flex 项目的高度 <code>height</code> 设置为 <code>100%</code> 即可，事实并非如你所愿，因为 CSS 的 <code>height</code> 取<code>%</code> （百分比）值时，如果父元素（Flex 容器）未显式设置 <code>height</code> 的值，那么 Flex 项目即使设置 <code>height:100%</code> ，浏览器计算出来的也会是 <code>0</code> 。</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9ea841db252a48cd9e67d1efb02c4d55~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/eYrMeWq" target="_blank" rel="noreferrer">https://codepen.io/airen/full/eYrMeWq</a></p></blockquote><p>这也并不是无解，在 Flexbox 布局中有两种解决方案。先来看第一种解决方案，就是 Flex 容器的宽高比要等于它的所有 Flex 项目的宽高比之和。比如上面这个示例，在 Flex 容器上需要显式设置它的宽高比为 <code>6:3</code> ，即：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">Flex 容器的 </span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">aspect-ratio</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> = (4 ÷ 3</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">) + (2 </span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">÷ 3</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">) = 6 </span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">÷ 3 = 6 : 3</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f0e8375028be4c258141f7e7a2a7272c~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><div class="language-HTML vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">HTML</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;container grid-row&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;item grid-column&quot;</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> style</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;--ratio: 4 / 3&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">4:3</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;item grid-column&quot;</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> style</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;--ratio: 2 / 3&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">2:3</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">flex</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  align-items</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">flex-start</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">  aspect-ratio: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">6</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> / </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">3</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.item</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">  aspect-ratio: </span><span style="--shiki-light:#795E26;--shiki-dark:#56B6C2;">var</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">--ratio</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">);</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  flex</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 1</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 0</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  height</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">100</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">; </span><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">/* 这个很重要 */</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><p>Flex 容器设置了 <code>aspect-ratio</code> 值之后，浏览器就可以计算出它的高度值，此时在 Flex 项目上显式设置 <code>height: 100%</code> 才有了意义，保证了同一行的 Flex 项目是相等的，宽度根据各自的 <code>aspect-ratio</code> 计算得到。这个时候，你看到的效果如下：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/289d53df61674b3483762cbb48473e98~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/WNJzdYw" target="_blank" rel="noreferrer">https://codepen.io/airen/full/WNJzdYw</a></p></blockquote><p>注意，如果你不想花太多时间去做数学计算的话，可以借助 CSS 自定义属性来辅助你：</p><div class="language-HTML vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">HTML</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;container grid-row&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;item grid-column&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">4:3</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;item grid-column&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">2:3</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#56B6C2;">:root</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#E06C75;">    --ratio-4-3</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">4</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> / </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">3</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#E06C75;">    --ratio-2-3</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">2</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> / </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">3</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#E06C75;">    --flex-container-ratio</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#795E26;--shiki-dark:#56B6C2;">calc</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#795E26;--shiki-dark:#56B6C2;">var</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">--ratio-4-3</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">) </span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">+</span><span style="--shiki-light:#795E26;--shiki-dark:#56B6C2;"> var</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">--ratio-2-3</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">)); </span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">flex</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  align-items</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">flex-start</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">  aspect-ratio: </span><span style="--shiki-light:#795E26;--shiki-dark:#56B6C2;">var</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">--flex-container-ratio</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">);</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.item</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">  aspect-ratio: </span><span style="--shiki-light:#795E26;--shiki-dark:#56B6C2;">var</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">--ratio</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">)</span></span>
<span class="line"><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">  flex</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 1</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 0</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  height</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">100</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">; </span><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">/* 这个很重要 */</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.item</span><span style="--shiki-light:#800000;--shiki-dark:#56B6C2;">:nth-child</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">(</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">)</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#E06C75;">    --ratio</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#795E26;--shiki-dark:#56B6C2;">var</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">--ratio-4-3</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">);</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.item</span><span style="--shiki-light:#800000;--shiki-dark:#56B6C2;">:nth-child</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">(</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">2</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">)</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#E06C75;">    --ratio</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#795E26;--shiki-dark:#56B6C2;">var</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">--ratio-2-3</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">);</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br></div></div><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/jOxzZPm" target="_blank" rel="noreferrer">https://codepen.io/airen/full/jOxzZPm</a></p></blockquote><p>不过这个方案有一定的缺陷存在，<strong>必须知道 Flex 项目的数量及其容器上的宽高比</strong> 。容器中的 Flex 项目一旦发生变化或容器中的 Flex 项目宽高比发生变化，开发者就需要重新计算 Flex 容器的宽高比，否则布局就不是按照相应的宽高比构建的。另外就是 Flex 容器要是设置了 <code>gap</code> 值，对 Flex 项目的计算也有一定的影响。</p><p>接着我们来看另一种解决方案，该方案 <strong>不需要根据 Flex 项目的宽高比来计算 Flex 容器的宽高比</strong> ，我们<strong>可以利用 Flex 项目的</strong> <strong><code>flex-grow</code></strong> <strong>属性的特性来完成所需的布局</strong> 。简单地说，如果 Flex 项目的宽高比的“<strong>分母</strong>”相同，则只需要在相应的 Flex 项目设置它的 <code>flex-grow</code> 值为“<strong>分子</strong> ”，同时显式设置 <code>flex-basis</code> 的值为 <code>0%</code> 。比如前面的示例，我们可以像这样来编写你的 CSS:</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">flex</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">} </span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.item</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    flex-basis</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">0</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">    aspect-ratio: </span><span style="--shiki-light:#795E26;--shiki-dark:#56B6C2;">var</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">--ratio</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">);</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.item</span><span style="--shiki-light:#800000;--shiki-dark:#56B6C2;">:nth-child</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">(</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">)</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    flex-grow</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">4</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.item</span><span style="--shiki-light:#800000;--shiki-dark:#56B6C2;">:nth-child</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">(</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">2</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">)</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    flex-grow</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">2</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/YzLaeEP" target="_blank" rel="noreferrer">https://codepen.io/airen/full/YzLaeEP</a></p></blockquote><p>如果 Flex 项目的宽高比的分母不同，你同样需要借助 CSS 自定义属性来完成，这样会让事情变得简单些：</p><div class="language-HTML vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">HTML</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;container row&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> style</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;--ratio: 3 / 2;&quot;</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;item column&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">3:2</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> style</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;--ratio: 16 / 9;&quot;</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;item column&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">16:9</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> style</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;--ratio: 1 / 1;&quot;</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;item column&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">1:1</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">flex</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.item</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    flex-basis</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">0</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">    aspect-ratio: </span><span style="--shiki-light:#795E26;--shiki-dark:#56B6C2;">var</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">--ratio</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">);</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    flex-grow</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#795E26;--shiki-dark:#56B6C2;">calc</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#795E26;--shiki-dark:#56B6C2;">var</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">--ratio</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">))</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>就是把 Flex 项目的 <code>flex-grow</code> 值为宽高比的计算值，比如 Flex 项目的宽高比是 <code>4 : 3</code> ，那么对应的 <code>flex-grow</code> 值就是 <code>1.333333</code> （即 <code>4 ÷ 3 = 1.3333</code>）。这种方案，还有一个优势，那就是 Flex 容器的 <code>gap</code> 值不会影响 Flex 项目的宽高比的计算。</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">flex</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    gap</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">5</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.item</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    flex-basis</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">0</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">    aspect-ratio: </span><span style="--shiki-light:#795E26;--shiki-dark:#56B6C2;">var</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">--ratio</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">);</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    flex-grow</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#795E26;--shiki-dark:#56B6C2;">calc</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#795E26;--shiki-dark:#56B6C2;">var</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">--ratio</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">))</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/be2292f8c177481089755170a0535499~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/OJZvQop" target="_blank" rel="noreferrer">https://codepen.io/airen/full/OJZvQop</a></p></blockquote><p>添点料进去（加上<code>&lt;img&gt;</code>），那么具有宽高比的图片墙（九宫格）布局效果就有了：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3dd08f8caed04bedbc520503e7f6c88c~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/QWrmmGZ" target="_blank" rel="noreferrer">https://codepen.io/airen/full/QWrmmGZ</a></p></blockquote><p>小作业，请使用 Flexbox 和 <code>aspect-ratio</code> 构建下图这样的布局效果：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6131cb0a0b4648e0a4b4c9e11447e7af~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><h2 id="具有不同对齐方式的导航栏" tabindex="-1">具有不同对齐方式的导航栏 <a class="header-anchor" href="#具有不同对齐方式的导航栏" aria-label="Permalink to &quot;具有不同对齐方式的导航栏&quot;">​</a></h2><p>在 Web 应用或 Web 页面中，导航栏（导航菜单）是 Web 中必不可少的一部分。我想很多同学在实际开发中碰到各式各样的导航栏的布局效果，抛开其他的 UI 样式不谈，只聊导航栏的对齐，就足以让不少同学感到头痛。</p><p>就导航栏对齐方式来说，很多同学都认为 “使用 Flexbox 的对齐方式” 就足以搞定，事实上呢？并非如此。虽然 Flexbox 的对齐方式很强大，但有些场景我们是不能使用 Flexbox 来布局，或者说使用 Flexbox 布局并不是最合适的。比如下图中，红色框中的导航栏的对齐效果，如果使用 Flexbox 就不太适合：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ca48a36541004c7e8b85e23f03c1dcf1~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>正如你看到的，上图中红色框是不太适合使用 Flexbox 来布局，但蓝色框中的布局效果，使用 Flexbox 就比较适合。</p><p>以下图中的导航栏为例：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d92b0390c465481c9586ff30b146a87c~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>很常见的几种对齐方式：</p><ul><li>居中对齐；</li><li>居左对齐；</li><li>两端对齐；</li><li>居右对齐。</li></ul><p>这四种对齐方式，在 Flexbox 布局中真的是太容易。前面三个，只需要在相应的 Flex 容器中设置 <code>justify-content</code> 属性的值即可，最后一个需要稍微加点样式，因为你无法直接使用 <code>justify-content</code> 的 <code>space-between</code> 就能达到所需要的效果，因此，只需在相应的 Flex 项目上设置 <code>margin-left</code> 为 <code>auto</code> 即可：</p><div class="language-HTML vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">HTML</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">&lt;!-- 样式一 --&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">header</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;container&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#CD3131;--shiki-dark:#E06C75;">NavMenu</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">header</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">&lt;!-- 样式二 和 样式三 --&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">header</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;container&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#CD3131;--shiki-dark:#E06C75;">Logo</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#CD3131;--shiki-dark:#E06C75;">NavMenu</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">header</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">&lt;!-- 样式四 --&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">header</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;container&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#CD3131;--shiki-dark:#E06C75;">Logo</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#CD3131;--shiki-dark:#E06C75;">NavMenu</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#CD3131;--shiki-dark:#E06C75;">Cart</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">header</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">flex</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">    algin-items: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">center</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#800000;--shiki-dark:#56B6C2;">:nth-child</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">(</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">)</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    justify-content</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">center</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#800000;--shiki-dark:#56B6C2;">:nth-child</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">(</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">3</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">)</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    justify-content</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">space-between</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#800000;--shiki-dark:#56B6C2;">:nth-child</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">(</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">4</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">) </span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.cart</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">{</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    margin-left</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">auto</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/ExLELgm" target="_blank" rel="noreferrer">https://codepen.io/airen/full/ExLELgm</a></p></blockquote><h2 id="灵活的弹性框" tabindex="-1">灵活的弹性框 <a class="header-anchor" href="#灵活的弹性框" aria-label="Permalink to &quot;灵活的弹性框&quot;">​</a></h2><p>Flexbox 布局最大的优势之一就是使用该技术构建的布局灵活性，适配性很强。Flex 项目的大小能很好适应它的容器（Flex 容器）。比如下面这个两列布局，左侧栏固定宽度，主内容列能随着它的父容器大小自适应，即父容器变大，它变宽；父容器小，它变窄：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8b4bacf532ab4c6ab26a2f6879759bff~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><div class="language-HTML vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">HTML</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;container&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">aside</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">aside</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">main</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">main</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>其中原理很简单，只需要将 <code>main</code> 元素的 <code>flex</code> 设置为 <code>1 1 auto</code> 或者 <code>1 1 0%</code> 即可。这样一来 <code>main</code> 就会根据 Flex 容器的空间自动调整自身的大小：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">flex</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">aside</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    width</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#795E26;--shiki-dark:#56B6C2;">var</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">--fixed-width</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">200</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">);</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">main</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    flex</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 1</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 0</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    min-width</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">0</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/GRdxGpg" target="_blank" rel="noreferrer">https://codepen.io/airen/full/GRdxGpg</a></p></blockquote><p>这样的效果还经常配合文本截取的特性一起使用。比如一行长文本，当 Flex 容器有足够空间时，显示所有文本，当 Flex 容器空间变小，无法展示所有文本时，文本会被剪切，并在文本末尾添加指示器（三个点 <code>...</code>）：</p><div class="language-HTML vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">HTML</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;target&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">  &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;target__title&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">strong</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">Flexbox Layout:</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">strong</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> Text here is very very long that it might</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">    get truncate if this box get resized too small</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">  &lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">  &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;target__emoji&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">    🎃</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">  &lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.target</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">flex</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  align-items</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">center</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  gap</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">rem</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.target__title</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  overflow</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">hidden</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  min-width</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">0</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  text-overflow</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">ellipsis</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  white-space</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">nowrap</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.target__emoji</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  width</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">max-content</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  margin-left</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">auto</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  flex-shrink</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">0</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0816d87afffe46c698364b2aabe761ae~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/zYjWaZJ" target="_blank" rel="noreferrer">https://codepen.io/airen/full/zYjWaZJ</a></p></blockquote><p>注意，在这个示例中，弹性框 <code>.target__title</code> 使用了 <code>flex</code> 的默认值，即 <code>flex: 0 1 auto</code> 。</p><p>再来看一个关于 <code>text-overflow: ellipsis</code> 在 Flexbox 布局中的实例。比如下面这样的一个场景，在我们平时的开发中也是很常见的：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/565a113fd3374632a67fa716da17823a~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>设计师期望的是“徽标过多时，最好提供省略号指示器，并不是直接截断或断行”。对于开发者来说，可能会使用像下面这样的一个 HTML 结构来构建徽标列表：</p><div class="language-HTML vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">HTML</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">&lt;!-- HTML --&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> </span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">ul</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;badges&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">li</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">Fast food</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">li</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">    &lt;!-- ... --&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">li</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">Fruits</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">li</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> </span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">ul</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>你可能会认为，直接给 <code>.badges</code> 元素添加下面几行代码就可以达到 Web 设计师预期的效果：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.badges</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> { </span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">flex</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    overflow</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">hidden</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    white-space</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">nowrap</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    text-overflow</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">ellipsis</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>这样的处理方式，最终在浏览器中呈现出来的效果是“溢出容器的徽标被裁剪了”：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cf35e662f5e5423f8dd9a05ead209ef6~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>如果把 <code>text-overflow</code> 相关的样式设置到 <code>&lt;li&gt;</code> 标签上：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.badges</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;"> li</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> { </span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    overflow</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">hidden</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">; </span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    text-overflow</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">ellipsis</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">; </span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    white-space</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">nowrap</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">; </span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>虽然不会像上面一样，把溢出的徽标裁剪掉，但这样做的话，虽然能在容器空间中将徽标罗列出来，但会在每个徽标上添加省略号的指示器，也不符合预期效果：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/70370e1aae6943518603934c3eac46e6~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>如果<code>li</code>元素是一个 Flex 容器的话，达到上图效果还需要额外添加一个标签来包裹文本：</p><div class="language-HTML vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">HTML</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;"> &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">ul</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;badges&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> </span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">     &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">li</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">span</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">Fast food</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">span</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">li</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> </span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">     &lt;!-- ... --&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> </span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">     &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">li</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">span</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">Fruits</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">span</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">li</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> </span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">ul</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>不过，在 CSS 中还是有方案可以达到设计师预期想要的效果的：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/39ae09d88c374793865036130dd9cb0c~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>达到上图的效果，在 CSS 中有两种方式可以实现，先来看第一种，即 <strong>使用 <code>line-clamp</code><strong><strong>替代</strong></strong><code>text-overflow</code></strong> ：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;"> .badges</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> { </span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">     overflow</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">hidden</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">; </span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">     text-overflow</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">ellipsis</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">; </span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">     display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: -webkit-box; </span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#56B6C2;">     -webkit-line-clamp</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">; </span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#56B6C2;">     -webkit-box-orient</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">vertical</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">; </span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> } </span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> </span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;"> .badges</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;"> li</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> { </span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">     display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">inline-flex</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">; </span><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">/* inline-block */</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> </span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> }</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><p>另外一种，还是继续使用 <code>text-overflow</code>，但需要改变每个<code>li</code>视觉模型，即 <strong>将</strong> <strong><code>display</code></strong> <strong>设置为</strong> <strong><code>inline-block</code></strong> ：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;"> .badges</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">  { </span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">     white-space</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">nowrap</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">; </span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">     overflow</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">hidden</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">; </span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">     text-overflow</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">ellipsis</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">; </span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> } </span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> </span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;"> .badges</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;"> li</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> { </span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">     display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">inline-block</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">; </span><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">/* inline-flex */</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> </span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> }</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/KKRoexo" target="_blank" rel="noreferrer">https://codepen.io/airen/full/KKRoexo</a></p></blockquote><p>小作业，请使用 Flexbox 和 文本截取等功能，构建下图这样的一个布局效果，列表项标题较长时（文本多）会被截断，并且提供省略号指示符（<code>...</code>），反之则不会：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f06264b0eee94db6b3b019c7e8621559~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><h2 id="contributors" tabindex="-1">Contributors <a class="header-anchor" href="#contributors" aria-label="Permalink to &quot;Contributors&quot;">​</a></h2><div><section class="border-b-1 border-[var(--vp-c-divider)] w-full border-b-solid mt-[24px] pb-[12px] flex gap-[12px] mb-[12px] flex-wrap max-w-[85%]"><div class="flex gap-[4px] items-center"><svg style="display:inline-block;" viewBox="0 0 16 16" width="1.2em" height="1.2em"><path fill="currentColor" d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16m.847-8.145a2.502 2.502 0 1 0-1.694 0C5.471 8.261 4 9.775 4 11c0 .395.145.995 1 .995h6c.855 0 1-.6 1-.995c0-1.224-1.47-2.74-3.153-3.145"></path></svg> 作者:<span>Long Mo</span></div><!----><!----><div class="flex gap-[4px] items-center"><svg style="display:inline-block;" viewBox="0 0 16 16" width="1.2em" height="1.2em"><path fill="currentColor" d="M9.293 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.707A1 1 0 0 0 13.707 4L10 .293A1 1 0 0 0 9.293 0zM9.5 3.5v-2l3 3h-2a1 1 0 0 1-1-1zM5.485 6.879l1.036 4.144l.997-3.655a.5.5 0 0 1 .964 0l.997 3.655l1.036-4.144a.5.5 0 0 1 .97.242l-1.5 6a.5.5 0 0 1-.967.01L8 9.402l-1.018 3.73a.5.5 0 0 1-.967-.01l-1.5-6a.5.5 0 1 1 .97-.242z"></path></svg> 字数统计:<span>10.6k 字</span></div><div class="flex gap-[4px] items-center"><svg style="display:inline-block;" viewBox="0 0 20 20" width="1.2em" height="1.2em"><path fill="currentColor" d="M10 0a10 10 0 1 0 10 10A10 10 0 0 0 10 0zm2.5 14.5L9 11V4h2v6l3 3z"></path></svg> 阅读时长:<span>42 分钟</span></div></section></div><div class="flex gap-2 items-center"><a href="https://github.com/Longmo666" rel="noreferrer" target="_blank"><img src="https://github.com/Longmo666.png" class="w-8 h-8 rounded-full"></a> Long Mo</div><div class="px-[1.2rem] relative py-[1rem] border-1 border-[var(--vp-c-border)]/[.55] w-full min-h-[32px] border-solid mt-[32px] leading-[24px] rounded-[4px]"><svg style="display:inline-block;" viewBox="0 0 512 512" width="1.2em" height="1.2em" class="absolute top-[1rem] right-[1.2rem]"><path fill="currentColor" d="M256 512a256 256 0 1 0 0-512a256 256 0 1 0 0 512m-56.6-199.4c31.2 31.2 81.9 31.2 113.1 0c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9c-50 50-131 50-181 0s-50-131 0-181s131-50 181 0c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0c-31.2-31.2-81.9-31.2-113.1 0s-31.2 81.9 0 113.1z"></path></svg><section class="flex flex-col gap-y-[8px] overflow-hidden"><div><span class="font-bold">文章作者：</span><span><a href="https://github.com/Longmo666" rel="noreferrer" target="_blank">Long Mo</a></span></div><div><span class="font-bold">版权声明：</span><span> 本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" rel="noreferrer" target="_blank"> CC BY-NC-SA 4.0 </a> 许可协议。转载请注明来自 <a href="#" rel="noreferrer" target="_blank">Longmo Docs</a></span> ！ </div></section></div></div></div></main><footer class="VPDocFooter" data-v-e512d8d8 data-v-73a75ed6><!--[--><!--]--><div class="edit-info" data-v-73a75ed6><div class="edit-link" data-v-73a75ed6><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/xxx" target="_blank" rel="noreferrer" data-v-73a75ed6><!--[--><span class="vpi-square-pen edit-link-icon" data-v-73a75ed6></span> 在 github 上编辑此页<!--]--></a></div><div class="last-updated" data-v-73a75ed6><p class="VPLastUpdated" data-v-73a75ed6 data-v-28126c9f>上次更新: <time datetime="2024-03-04T16:28:46.000Z" data-v-28126c9f></time></p></div></div><nav class="prev-next" data-v-73a75ed6><div class="pager" data-v-73a75ed6><a class="VPLink link pager-link prev" href="/long-press/css3/%E7%8E%B0%E4%BB%A3web%E5%B8%83%E5%B1%80/08" data-v-73a75ed6><!--[--><span class="desc" data-v-73a75ed6>上一篇</span><span class="title" data-v-73a75ed6>Flexbox 布局中的 flex-basis：谁能决定 Flex 项目的大小？</span><!--]--></a></div><div class="pager" data-v-73a75ed6><a class="VPLink link pager-link next" href="/long-press/css3/%E7%8E%B0%E4%BB%A3web%E5%B8%83%E5%B1%80/10" data-v-73a75ed6><!--[--><span class="desc" data-v-73a75ed6>下一篇</span><span class="title" data-v-73a75ed6>10</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-4c760b95 data-v-4f1388a4><div class="container" data-v-4f1388a4><!----><p class="copyright" data-v-4f1388a4>Copyright © 2024-present Longmo</p></div></footer><!--[--><!--]--></div></div>
    <script>window.__VP_HASH_MAP__=JSON.parse("{\"css3_lightningcss_index.md\":\"DvrpJ9-C\",\"css3_现代web布局_02.md\":\"NnFPbKjC\",\"css3_postcss_postcss-prefix-selector增加统一作用域.md\":\"BTi7xZ9T\",\"css3_现代web布局_01.md\":\"CSOVLYFa\",\"css3_index.md\":\"gWeubSHW\",\"css3_现代web布局_05.md\":\"XnHgE5qs\",\"css3_现代web布局_07.md\":\"B0JalRYm\",\"electron_electron开发实战_index.md\":\"DlTk4nHM\",\"css3_现代web布局_10.md\":\"QvmMy1qK\",\"css3_现代web布局_03.md\":\"DndCH4AP\",\"css3_现代web布局_22.md\":\"BTcBI1Ar\",\"css3_现代web布局_index.md\":\"BRrTkyN-\",\"react_antd使用踩坑经验汇总_procomponents_index.md\":\"CnA6aYv_\",\"nodejs_change-case更改大小写.md\":\"CtntdOEt\",\"react_react好用的插件_rxjs-hooks.md\":\"CahRrTvr\",\"nodejs_复制移动文件.md\":\"DJvz4Dcu\",\"css3_现代web布局_15.md\":\"CxTdKubj\",\"css3_现代web布局_06.md\":\"DKzKVbHi\",\"guide_axios封装.md\":\"yeyMeLKL\",\"react_react实战_设计模式与最佳实践_服务器端渲染（1）：基本套路.md\":\"Ci9ZteTc\",\"react_react实战_设计模式与最佳实践_react 单元测试.md\":\"ghuW9_Ym\",\"react_react好用的插件_react-to-print.md\":\"DUEXVCMF\",\"css3_现代web布局_12.md\":\"DzvNLnB9\",\"react_react好用的插件_react-load-script.md\":\"DBiqdA1k\",\"electron_electron开发实战_释放前端想象力.md\":\"DjfKiu2P\",\"react_react实战_设计模式与最佳实践_react的设计思想.md\":\"CDFxAnJB\",\"react_react组件库搭建指南_02开发调试.md\":\"C_T24zrV\",\"react_react实战_设计模式与最佳实践_react 的未来（1）： 拥抱异步渲染.md\":\"DDCdfFZA\",\"react_react实战_设计模式与最佳实践_react 状态管理（1）：组件状态.md\":\"CleS-bmU\",\"react_react好用的插件_react-viewer.md\":\"CK92G5ky\",\"electron_electron开发实战_electron应用打包.md\":\"DVihGNUt\",\"react_react好用的插件_index.md\":\"CYvYsgxN\",\"react_react好用的插件_formik-antd.md\":\"BVXoD1vi\",\"react_react实战_设计模式与最佳实践_组件设计模式（2）：高阶组件.md\":\"tcEHCkX9\",\"react_css解决方案_styled-components.md\":\"BdEVJSYP\",\"react_react后台管理系统项目实战_index.md\":\"Cf5Aki5e\",\"react_react好用的插件_floating-ui.md\":\"CJ47U607\",\"react_react好用的插件_js-pinyin.md\":\"CCi7zpiQ\",\"electron_electron开发实战_原生gui.md\":\"CKymHWIE\",\"react_antd使用踩坑经验汇总_tabs选项卡.md\":\"DbBQtB84\",\"react_react好用的插件_immer.md\":\"J3J2rLev\",\"css3_现代web布局_08.md\":\"CKAlv-cw\",\"react_react好用的插件_@ebay_nice-modal-react.md\":\"2t81QhzX\",\"react_react hooks.md\":\"DllmXlwe\",\"react_发布订阅_事件总线.md\":\"DGl0tyUU\",\"react_react组件库搭建指南_03编译打包.md\":\"BSWt83_X\",\"guide_quickstart.md\":\"DNtvLzj7\",\"react_开发一个组件库_如何完善组件单测.md\":\"9v27j5fA\",\"react_慕课网最新react技术栈，实战复杂低代码项目-仿问卷星_index.md\":\"DV2mTP-I\",\"react_ahooks_usewhydidyouupdate.md\":\"DeDGpqMK\",\"react_开发一个组件库_index.md\":\"DFCM9Fyc\",\"react_ahooks_usemutationobserver.md\":\"DopGRhup\",\"react_ahooks_uselocalstoragestate.md\":\"CNKG9DfH\",\"react_如何写出更优雅的 react 组件.md\":\"BNRAsuz5\",\"react_ahooks_useeventlistener.md\":\"C022IGRg\",\"react_ahooks_useloading.md\":\"hmNqPF-b\",\"react_ahooks_usethrottle.md\":\"Cxs7sHDg\",\"react_ahooks_usevirtuallist.md\":\"CbSqBIa_\",\"react_ahooks_index.md\":\"BZgeYQAN\",\"react_ahooks_usethrottleeffect.md\":\"Cu9lbAeN\",\"react_ahooks_useinterval.md\":\"z_JjaRUC\",\"react_ahooks_useinfinitescroll.md\":\"05X3BT3k\",\"react_ahooks_useboolean.md\":\"B9uk9pv1\",\"react_ahooks_usehover.md\":\"CQ90ygMl\",\"react_ahooks_usetoggle.md\":\"Dhg-kOcZ\",\"css3_现代web布局_16.md\":\"DqleGwZV\",\"electron_前端必学的桌面开发：electron_react开发桌面应用_1w多字超详细.md\":\"B4S71t_j\",\"react_index.md\":\"VMykJvDU\",\"react_ahooks_usethrottlefn.md\":\"h86SJGdz\",\"react_ahooks_useurlstate.md\":\"N0NRnJcE\",\"react_ahooks_usetrackedeffect.md\":\"DikGGrmT\",\"react_状态管理_natur.md\":\"CjabmgMv\",\"react_ahooks_useantdtable.md\":\"BRTEfq-4\",\"react_ahooks_userafinterval.md\":\"DbqchCta\",\"react_ahooks_useunmount.md\":\"DKpqgfJ2\",\"getting_index.md\":\"CslhLb_Q\",\"react_ahooks_usepagination.md\":\"BZPuA30r\",\"react_react好用的插件_react-jsx-parse.md\":\"BFws_Jvt\",\"react_ahooks_useprevious.md\":\"DoaMcKL0\",\"react_数据请求的reacthooks库_index.md\":\"BVjU5EHg\",\"nodejs_解压缩.md\":\"B8sDL8Ck\",\"react_开发一个组件库_handlebars模板.md\":\"eFtlYiJE\",\"react_自定义hooks_useasynceffect.md\":\"0TOcgDP8\",\"react_ahooks_usewebsocket.md\":\"BSCnKAhD\",\"css3_现代web布局_09.md\":\"CJg03gvR\",\"react_ahooks_useasynceffect.md\":\"LHnOKcnJ\",\"移动端项目_index.md\":\"BYabTvu-\",\"react_ahooks_usememoizedfn.md\":\"BHTS7A7g\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_index.md\":\"BOXXNcld\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第04章 ts 类易被忽视的重要技能，单件设计模式和相关技能深入.md\":\"CCgSUH_B\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第11章 运用 ts 手写 promise 源码.md\":\"BalHRnKD\",\"react_性能监控_index.md\":\"BLRO71Ft\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第03章 ts类方法代码优化的三大法宝： 函数重载、类方法重载、类构造器重载.md\":\"BS1BYvbm\",\"standard_fatherrc.ts配置文件.md\":\"Dkdjh5--\",\"react_自定义hooks_useexceldownload.md\":\"DGb3CWTU\",\"tools_runjs.md\":\"IzZ9xe5N\",\"tools_自动版本管理和生成changelog.md\":\"Dak6Id3b\",\"react_react实战_设计模式与最佳实践_路由的魔法：react router.md\":\"CZ2pkqmc\",\"tools_依赖镜像地址.md\":\"D5Etjm_v\",\"react_react实战_设计模式与最佳实践_组件设计模式（5）：组合组件.md\":\"D54UFiB5\",\"tools_workspaces核心特性总结.md\":\"CxNbObiL\",\"react_自定义hooks_usegreatasync.md\":\"DRVA9yrK\",\"react_react组件库搭建指南_05标准化发布流程.md\":\"BCCPnMto\",\"react_react实战_设计模式与最佳实践_组件设计模式（1）：聪明组件和傻瓜组件.md\":\"tHZI-Xkb\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第05章 ts继承深入_手写优化底层源码.md\":\"B3EQqYKB\",\"tools_rollup打包.md\":\"tSbCVBX5\",\"tools_webstorm快捷键.md\":\"wTpb7qJx\",\"react_react实战_设计模式与最佳实践_服务器端渲染（2）理解nextjs.md\":\"BqBtpEHC\",\"tools_vscode使用教程.md\":\"CqieXqJ8\",\"react_react最佳实践.md\":\"CG2Xrs5X\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第07章 泛型类_泛型接口_泛型类约束的复杂应用【无比重要的深度技能】.md\":\"CuEcP3SC\",\"react_自定义hooks_useeffectenhanced.md\":\"BSK0VwJa\",\"vue_index.md\":\"OW-QE8NS\",\"react_状态管理_react中的组件通信方案.md\":\"D8VvM0h8\",\"typescript_ts 从入门到深度掌握，晋级typescript高手实战课程_index.md\":\"CHFAmRtj\",\"standard_pretty-quick.md\":\"CL9LWL6Z\",\"typescript_ts 从入门到深度掌握，晋级typescript高手实战课程_第10章ts声明文件，ts模块.md\":\"BgUWX90K\",\"react_ahooks_usesetstate.md\":\"jYidiqGI\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第06章 ts高频使用技能： 类型断言、类型守卫、自定义守卫_ 多态_类型守卫组合应用.md\":\"DTiCfWrY\",\"standard_typings.d.ts.md\":\"COgkopwu\",\"react_react实战_设计模式与最佳实践_组件设计模式（4）：提供者模式.md\":\"CpJkLsBD\",\"typescript_axios_index.md\":\"CjiV2R0j\",\"css3_现代web布局_23.md\":\"DtcX9bTS\",\"electron_electron开发实战_app特性.md\":\"CCGKgh2J\",\"tools_常用命令.md\":\"BCECAPPN\",\"react_ahooks_useupdateeffect.md\":\"B8UnIDT1\",\"tools_npm镜像源管理工具.md\":\"BQvl6-cK\",\"react_自定义hooks_index.md\":\"TbSBlD7i\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第15章 js 原型_复杂原型继承 【查漏补缺】.md\":\"Bym60KVf\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第12章整合vue3手写高水准大厂的ts版vuex4源码.md\":\"Cb3ALa6o\",\"react_css解决方案_css_module.md\":\"kmxgfb6l\",\"css3_现代web布局_04.md\":\"qxIAivzd\",\"react_ahooks_useraftimeout.md\":\"zZ6X2MGp\",\"react_自定义hooks_usecopy.md\":\"B_vVrQah\",\"react_useform.md\":\"D7K5ezD8\",\"css3_现代web布局_27.md\":\"DVEkZdZW\",\"react_状态管理_valtio.md\":\"CXPGtt95\",\"typescript_tsup如何使用.md\":\"CHCfoXjX\",\"react_ahooks_usecookiestate.md\":\"CdRty31d\",\"tools_node各类命令.md\":\"Dp8hvkZX\",\"electron_electron开发实战_electron优化白屏.md\":\"TluuIOV8\",\"css3_现代web布局_24.md\":\"BTAj5AxQ\",\"css3_现代web布局_13.md\":\"BvIlMTco\",\"css3_现代web布局_14.md\":\"CXYZfM8r\",\"react_antd使用踩坑经验汇总_antdtable表格.md\":\"DJY5Mvdl\",\"guide_babel.md\":\"DTbGDSVq\",\"react_状态管理_zustand翻译文档.md\":\"D72s6MxU\",\"guide_index.md\":\"zNzT7elx\",\"tools_资源导航.md\":\"ByR0zpON\",\"react_antd使用踩坑经验汇总_menu菜单.md\":\"CUT3snoK\",\"tools_pnpm多包项目.md\":\"B5SWK1rS\",\"guide_webpack插件.md\":\"RycubFW9\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第02章 全栈思维全面深度掌握 ts 类.md\":\"DT7QMqkY\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第10章 从装饰器应用，底层 js 到 仿 nestjs实战，路由器底层复杂泛型.md\":\"D8kaCtfy\",\"electron_electron开发实战_开发一个简单版的番茄钟.md\":\"CrvCihNB\",\"react_ahooks_useclickaway.md\":\"CZiIOkBS\",\"index.md\":\"C-4ajOyn\",\"react_自定义hooks_useinterval.md\":\"CL7txl3c\",\"nodejs_请求工具类.md\":\"pJv1vv26\",\"react_ahooks_usedebouncefn.md\":\"DoBqhrGU\",\"getting_why.md\":\"B0La2IDF\",\"vue_vue2打包优化.md\":\"o7QF6PW3\",\"nodejs_globby.md\":\"CTH274g9\",\"standard_tsconfig.json.md\":\"CFCzGYxu\",\"react_reactrouter.md\":\"B9PtxEJ9\",\"typescript_ts-challenge.md\":\"CQjhG-Mq\",\"css3_现代web布局_18.md\":\"DbKppEVn\",\"react_ahooks_usedebounce.md\":\"DRqZkoSI\",\"react_自定义hooks_useintersection.md\":\"Bvd3uAWW\",\"nodejs_cli工具_index.md\":\"CGwLSUZ5\",\"react_react实战_设计模式与最佳实践_index.md\":\"C8mvV9MI\",\"tools_规范git代码提交信息.md\":\"BASOsPqX\",\"tools_windows测试ip端口.md\":\"DG6x0Mw8\",\"electron_electron开发实战_使用nodejs调用原生模块.md\":\"CRvmiRGG\",\"nodejs_kill-port跨平台解决端口占用问题.md\":\"BEoOmVOA\",\"css3_现代web布局_28.md\":\"jsAdcmE1\",\"react_react实战_设计模式与最佳实践_组件实践（1）：如何定义清晰可维护的接口.md\":\"C9ky0LxI\",\"react_react实战_设计模式与最佳实践_react 的未来（3）：函数化的 hooks.md\":\"CFPGDH01\",\"react_react组件库搭建指南_index.md\":\"DavlhH-3\",\"react_react避坑指南_usecallback_usememo.md\":\"DBJVYTaL\",\"standard_prettier.md\":\"B8zmNcDZ\",\"react_react实战_设计模式与最佳实践_组件设计模式（3）：render props 模式.md\":\"J6wo2neN\",\"standard_git提交规范.md\":\"BY6vFgPF\",\"css3_现代web布局_26.md\":\"BlwKd9DD\",\"react_redux.md\":\"BR83V68G\",\"nodejs_fs-extra文件系统扩展.md\":\"BeGbM1-y\",\"react_react组件库搭建指南_06dumi2.x的使用.md\":\"BovenX8E\",\"tools_github常用技巧.md\":\"DCwuF17j\",\"electron_数据持久缓存方案_electron-store.md\":\"6LHFkhuG\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第08章 深度掌握泛型函数、泛型函数重载【无比重要的深度技能】.md\":\"BvOBMPMd\",\"nodejs_semantic-release.md\":\"B_4_SZrq\",\"react_react实战_设计模式与最佳实践_组件实践（2）：组件的内部实现.md\":\"pvpT0TG5\",\"typescript_tslib如何使用.md\":\"BsoCW_pQ\",\"react_react实战_设计模式与最佳实践_组件实践（3）：组件化样式.md\":\"DGiADrWs\",\"react_css解决方案_index.md\":\"Q7QSPlYi\",\"typescript_tsdx使用.md\":\"Bcl_A70V\",\"css3_现代web布局_17.md\":\"BCxBKcNP\",\"react_react避坑指南_usestate.md\":\"DK9-NLHJ\",\"electron_react中开发踩坑.md\":\"DpZMxt4e\",\"react_react实战_设计模式与最佳实践_react 的未来（2）：suspense 带来的异步操作革命.md\":\"BLMrhryT\",\"guide_两个跨域页面进行跳转传参的终极方案.md\":\"DrhWeMH4\",\"react_react避坑指南_index.md\":\"DSoRNwmH\",\"react_自定义hooks_useinputhistory.md\":\"BzWdP5Ij\",\"react_ahooks_useeventemitter.md\":\"OluScTeX\",\"react_自定义hooks_usedebounce.md\":\"7ESFZNIZ\",\"electron_dll使用.md\":\"CGmPSJLR\",\"css3_现代web布局_19.md\":\"DIVJU0PC\",\"react_react好用的插件_react-fast-marquee.md\":\"ZhOvpApp\",\"guide_markdown语法.md\":\"BiAJoIJO\",\"nodejs_execa执行外部命令.md\":\"x2fLlbix\",\"nodejs_npkill快速查找删除node_modules.md\":\"CCmNiMZ0\",\"react_ahooks_usefullscreen.md\":\"BkgW8e5k\",\"react_自定义hooks_usesetparticalstate.md\":\"BUv_cnmS\",\"standard_css规范.md\":\"DeHg6jnS\",\"electron_数据持久缓存方案_数据持久缓存库lndb.md\":\"DJUK7UVx\",\"react_自定义组件_如何在react应用中建立错误处理层.md\":\"CNGgmToJ\",\"react_react搞定复杂项目状态管理_index.md\":\"BAj7---e\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第09章 深入infer、ts高级类型、泛型再进阶【全方位深度掌握 ts 泛型】.md\":\"C4bu5mph\",\"tools_idea 注释模板配置.md\":\"0gbuJbd6\",\"electron_基于electron-vite构建react桌面客户端.md\":\"DLOPvG7Q\",\"nodejs_release-it.md\":\"DMPaqLXc\",\"react_react实战_设计模式与最佳实践_react 状态管理（3）：mobx 使用模式.md\":\"Bm7xwY_i\",\"react_ahooks_usehistorytravel.md\":\"DiEJa1G5\",\"css3_现代web布局_21.md\":\"D2PeNBzk\",\"css3_现代web布局_11.md\":\"B10tI7m_\",\"react_antd使用踩坑经验汇总_tree组件.md\":\"CHpE5yvc\",\"electron_electron-builder.md\":\"DNL_pnq4\",\"standard_vue规范.md\":\"DyiLpRai\",\"electron_index.md\":\"BRqk3UrY\",\"react_自定义hooks_userouter.md\":\"LSydLgnY\",\"utils_rxjs.md\":\"C9QQC7cC\",\"standard_codereview代码审查.md\":\"vOhADmqT\",\"react_ahooks_userequest函数.md\":\"erWiB1Ub\",\"react_自定义hooks_usedebouncefn.md\":\"CD-kzD_X\",\"linux_linux常用命令.md\":\"D7RSIp22\",\"standard_commitlint.md\":\"Bc6BHMQJ\",\"react_自定义hooks_uselocationlisten.md\":\"lpoaVI0f\",\"standard_组件封装规范.md\":\"0Ow45yWm\",\"react_自定义hooks_useecharts.md\":\"GJwF9MkV\",\"nodejs_bluebird超高性能的promise库.md\":\"DY98ImvT\",\"react_react避坑指南_useref.md\":\"fBjuCQ9O\",\"electron_electron开发实战_electron环境搭建.md\":\"BaHlrXyB\",\"utils_index.md\":\"mk7T0j55\",\"react_自定义hooks_useevent.md\":\"Comn2-Er\",\"typescript_index.md\":\"Dcw9VPNE\",\"standard_git分支开发规范.md\":\"BIXsyTAc\",\"electron_三方库.md\":\"CAt92F-s\",\"react_react组件库搭建指南_01项目初始化.md\":\"hYE7GWll\",\"react_react好用的插件_jsbarcode.md\":\"CBTRcUAR\",\"electron_electron-react-boilerplate.md\":\"BzWSbABc\",\"react_自定义hooks_usemodal.md\":\"B_XFkn0G\",\"standard_editorconfig.md\":\"D8UrOG7b\",\"tools_git基本使用.md\":\"BvP_0S5g\",\"react_react避坑指南_闭包陷阱.md\":\"zChJGfX2\",\"standard_prettierrc.md\":\"BdHhuL9t\",\"standard_babelrc.md\":\"DxUrlX2l\",\"standard_eslint规范.md\":\"Mu3t4FWn\",\"react_react实战_设计模式与最佳实践_react 状态管理（4）：不同方式对比.md\":\"C3iD1iFV\",\"react_antd使用踩坑经验汇总_index.md\":\"DDsanD1T\",\"tools_yalc本地调试组件库方案.md\":\"BQ3H5AQN\",\"standard_json格式规范.md\":\"B3NuLvz_\",\"electron_配置讲解.md\":\"Bz4ASaED\",\"nodejs_index.md\":\"D6qsbk0v\",\"standard_node_cjs和esm混合开发.md\":\"DedlYZ1u\",\"css3_现代web布局_25.md\":\"DZBc6jqi\",\"standard_stylelint.md\":\"zaLGDP6-\",\"react_自定义hooks_useformmodal.md\":\"DRclMTXI\",\"standard_开源证书.md\":\"CNa1gXoD\",\"react_antd使用踩坑经验汇总_其他弹出层.md\":\"CYvGLZdo\",\"utils_baseinputnumber.md\":\"CCJr66pT\",\"guide_installation.md\":\"Cyna48DO\",\"utils_lodash.md\":\"B_LD-ulc\",\"standard_react规范.md\":\"BDzywc_U\",\"standard_sytlelint.md\":\"BHAGjA08\",\"tools_readme.md自动生成目录.md\":\"Doh9u-Eg\",\"react_自定义hooks_usememo.md\":\"CZgD0tn_\",\"standard_gitignore.md\":\"DGdE7Xq3\",\"react_react避坑指南_useeffect.md\":\"BNAb8N04\",\"nodejs_pkg打包node程序.md\":\"C_mVgg8Y\",\"standard_husky.md\":\"DWpB1fyF\",\"utils_calcutils.md\":\"QyONwp33\",\"tools_index.md\":\"CrRsxT5W\",\"standard_index.md\":\"zy5tYKLI\",\"react_自定义hooks_usemethods.md\":\"CLURCU9f\",\"react_自定义hooks_useloadscript.md\":\"CYcWRvSo\",\"tools_google快捷键.md\":\"mD76rDlK\",\"standard_package.json.md\":\"jsOo3MDQ\",\"standard_前端开发最佳实践总结.md\":\"BGrFiLKW\",\"react_自定义hooks_usesafestate.md\":\"m62ZMP2_\",\"standard_prettierignore.md\":\"VM68Ff5l\",\"react_react实战_设计模式与最佳实践_react 状态管理（2）：redux 使用模式.md\":\"CA0pcV96\",\"utils_mitt.md\":\"DG7F8qQl\",\"standard_gitlab.yml.md\":\"lN9PqoBe\",\"nodejs_minimist命令行参数解析.md\":\"Dx4gEgi2\",\"standard_命名规范.md\":\"DWUPIS4I\",\"react_自定义hooks_usepersistcallback.md\":\"FHXVMyDJ\",\"tools_windows终端优化.md\":\"DANvAyOj\",\"electron_ssl证书.md\":\"Q1dQBluF\",\"react_自定义组件_lazyload.md\":\"B9Bn4iLf\",\"react_自定义组件_keepalive.md\":\"YY9acXG_\",\"tools_常用node库.md\":\"DTeGhNPp\",\"standard_lint-staged.md\":\"DidcSpvQ\",\"css3_现代web布局_20.md\":\"DVP5FwHt\",\"guide_数字相关知识.md\":\"BRzTdbnI\",\"standard_圈复杂度.md\":\"B-UtHNKH\",\"tools_windows快捷键.md\":\"BFgiqO74\",\"standard_ts规范.md\":\"CiDbO0cg\",\"react_antd使用踩坑经验汇总_form表单.md\":\"DGT8jzsZ\",\"react_状态管理_zustand.md\":\"CQAFP37K\",\"react_react好用的插件_react-hook-form.md\":\"BsJSOnXN\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"zh-CN\",\"dir\":\"ltr\",\"title\":\"龙陌的博客\",\"description\":\"基于vite为基础搭建的风格脚手架,提供多种模板以便于更高效的解决业务需求！\",\"base\":\"/long-press/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.ico\",\"nav\":[{\"text\":\"💻 首页\",\"link\":\"/\"},{\"text\":\"💡 指南\",\"link\":\"/guide/\",\"activeMatch\":\"/guide/\"},{\"text\":\"🔧 编程工具\",\"link\":\"/tools/\"},{\"text\":\"🔧 常用工具类\",\"link\":\"/utils/\"},{\"text\":\"📋 前端规范\",\"link\":\"/standard/\"},{\"text\":\"⭐ React\",\"link\":\"/react/React实战,设计模式与最佳实践/\"},{\"text\":\"⭐ TypeScript\",\"link\":\"/typescript/\"},{\"text\":\"⭐ Css3\",\"link\":\"/css3/\"},{\"text\":\"⭐ Electron\",\"link\":\"/electron/\"},{\"text\":\"⭐ Linux\",\"link\":\"/linux/linux常用命令\",\"activeMatch\":\"/linux/\"}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://vitepress.vuejs.org/guide/getting-started\"},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/248956095\"}],\"footer\":{\"copyright\":\"Copyright © 2024-present Longmo\"},\"sidebar\":{\"/\":[{\"text\":\"开始阅读\",\"collapsed\":false,\"items\":[{\"text\":\"阅读须知\",\"link\":\"/guide\"}]}],\"/tools/\":[{\"collapsed\":false,\"items\":[{\"text\":\"GitHub常用技巧\",\"link\":\"\\\\tools\\\\GitHub常用技巧.md\"},{\"text\":\"Google快捷键\",\"link\":\"\\\\tools\\\\Google快捷键.md\"},{\"text\":\"README.md自动生成目录\",\"link\":\"\\\\tools\\\\README.md自动生成目录.md\"},{\"text\":\"Rollup打包\",\"link\":\"\\\\tools\\\\Rollup打包.md\"},{\"text\":\"Runjs\",\"link\":\"\\\\tools\\\\Runjs.md\"},{\"text\":\"Vscode使用教程\",\"link\":\"\\\\tools\\\\Vscode使用教程.md\"},{\"text\":\"WebStorm快捷键\",\"link\":\"\\\\tools\\\\WebStorm快捷键.md\"},{\"text\":\"Windows快捷键\",\"link\":\"\\\\tools\\\\Windows快捷键.md\"},{\"text\":\"Windows测试IP端口\",\"link\":\"\\\\tools\\\\Windows测试IP端口.md\"},{\"text\":\"Windows终端优化\",\"link\":\"\\\\tools\\\\Windows终端优化.md\"},{\"text\":\"Yalc本地调试组件库方案\",\"link\":\"\\\\tools\\\\Yalc本地调试组件库方案.md\"},{\"text\":\"git基本使用\",\"link\":\"\\\\tools\\\\git基本使用.md\"},{\"text\":\"idea 注释模板配置\",\"link\":\"\\\\tools\\\\idea 注释模板配置.md\"},{\"text\":\"node各类命令\",\"link\":\"\\\\tools\\\\node各类命令.md\"},{\"text\":\"npm镜像源管理工具\",\"link\":\"\\\\tools\\\\npm镜像源管理工具.md\"},{\"text\":\"pnpm多包项目\",\"link\":\"\\\\tools\\\\pnpm多包项目.md\"},{\"text\":\"workspaces核心特性总结\",\"link\":\"\\\\tools\\\\workspaces核心特性总结.md\"},{\"text\":\"依赖镜像地址\",\"link\":\"\\\\tools\\\\依赖镜像地址.md\"},{\"text\":\"常用node库\",\"link\":\"\\\\tools\\\\常用node库.md\"},{\"text\":\"常用命令\",\"link\":\"\\\\tools\\\\常用命令.md\"},{\"text\":\"自动版本管理和生成CHANGELOG\",\"link\":\"\\\\tools\\\\自动版本管理和生成CHANGELOG.md\"},{\"text\":\"规范GIT代码提交信息\",\"link\":\"\\\\tools\\\\规范GIT代码提交信息.md\"},{\"text\":\"资源导航\",\"link\":\"\\\\tools\\\\资源导航.md\"}]}],\"/standard/\":[{\"collapsed\":false,\"items\":[{\"text\":\"CodeReview代码审查\",\"link\":\"\\\\standard\\\\CodeReview代码审查.md\"},{\"text\":\"Css规范\",\"link\":\"\\\\standard\\\\Css规范.md\"},{\"text\":\"Git分支开发规范\",\"link\":\"\\\\standard\\\\Git分支开发规范.md\"},{\"text\":\"Node_CJS和ESM混合开发\",\"link\":\"\\\\standard\\\\Node_CJS和ESM混合开发.md\"},{\"text\":\"React规范\",\"link\":\"\\\\standard\\\\React规范.md\"},{\"text\":\"babelrc\",\"link\":\"\\\\standard\\\\babelrc.md\"},{\"text\":\"commitlint\",\"link\":\"\\\\standard\\\\commitlint.md\"},{\"text\":\"editorconfig\",\"link\":\"\\\\standard\\\\editorconfig.md\"},{\"text\":\"eslint规范\",\"link\":\"\\\\standard\\\\eslint规范.md\"},{\"text\":\"fatherrc.ts配置文件\",\"link\":\"\\\\standard\\\\fatherrc.ts配置文件.md\"},{\"text\":\"gitignore\",\"link\":\"\\\\standard\\\\gitignore.md\"},{\"text\":\"gitlab.yml\",\"link\":\"\\\\standard\\\\gitlab.yml.md\"},{\"text\":\"git提交规范\",\"link\":\"\\\\standard\\\\git提交规范.md\"},{\"text\":\"husky\",\"link\":\"\\\\standard\\\\husky.md\"},{\"text\":\"json格式规范\",\"link\":\"\\\\standard\\\\json格式规范.md\"},{\"text\":\"lint-staged\",\"link\":\"\\\\standard\\\\lint-staged.md\"},{\"text\":\"package.json\",\"link\":\"\\\\standard\\\\package.json.md\"},{\"text\":\"prettier\",\"link\":\"\\\\standard\\\\prettier.md\"},{\"text\":\"prettierignore\",\"link\":\"\\\\standard\\\\prettierignore.md\"},{\"text\":\"prettierrc\",\"link\":\"\\\\standard\\\\prettierrc.md\"},{\"text\":\"pretty-quick\",\"link\":\"\\\\standard\\\\pretty-quick.md\"},{\"text\":\"stylelint\",\"link\":\"\\\\standard\\\\stylelint.md\"},{\"text\":\"sytlelint\",\"link\":\"\\\\standard\\\\sytlelint.md\"},{\"text\":\"tsconfig.json\",\"link\":\"\\\\standard\\\\tsconfig.json.md\"},{\"text\":\"ts规范\",\"link\":\"\\\\standard\\\\ts规范.md\"},{\"text\":\"typings.d.ts\",\"link\":\"\\\\standard\\\\typings.d.ts.md\"},{\"text\":\"vue规范\",\"link\":\"\\\\standard\\\\vue规范.md\"},{\"text\":\"前端开发最佳实践总结\",\"link\":\"\\\\standard\\\\前端开发最佳实践总结.md\"},{\"text\":\"命名规范\",\"link\":\"\\\\standard\\\\命名规范.md\"},{\"text\":\"圈复杂度\",\"link\":\"\\\\standard\\\\圈复杂度.md\"},{\"text\":\"开源证书\",\"link\":\"\\\\standard\\\\开源证书.md\"},{\"text\":\"组件封装规范\",\"link\":\"\\\\standard\\\\组件封装规范.md\"}]}],\"/aHooks/\":[],\"/utils/\":[{\"collapsed\":false,\"items\":[{\"text\":\"BaseInputNumber\",\"link\":\"\\\\utils\\\\BaseInputNumber.md\"},{\"text\":\"calcUtils\",\"link\":\"\\\\utils\\\\calcUtils.md\"},{\"text\":\"lodash\",\"link\":\"\\\\utils\\\\lodash.md\"},{\"text\":\"mitt\",\"link\":\"\\\\utils\\\\mitt.md\"},{\"text\":\"rxjs\",\"link\":\"\\\\utils\\\\rxjs.md\"}]}],\"/guide/\":[{\"text\":\"基础\",\"items\":[{\"text\":\"快速开始\",\"link\":\"/guide/quickstart\"},{\"text\":\"Markdown语法\",\"link\":\"/guide/Markdown语法\"}]},{\"text\":\"进阶\",\"items\":[{\"text\":\"打包指南\",\"link\":\"/guide/打包指南\"}]}],\"/react/\":{\"base\":\"/react/\",\"items\":[{\"text\":\"React基础\",\"base\":\"/react/\",\"collapsed\":false,\"items\":[{\"text\":\"Redux\",\"link\":\"Redux\"},{\"text\":\"React Hooks\",\"link\":\"React Hooks\"},{\"text\":\"ReactRouter\",\"link\":\"ReactRouter\"}]},{\"text\":\"Antd使用踩坑经验汇总\",\"base\":\"/react/Antd使用踩坑经验汇总/\",\"items\":[{\"text\":\"Form表单\",\"link\":\"Form表单\"},{\"text\":\"AntdTable表格\",\"link\":\"AntdTable表格\"},{\"text\":\"Tree树组件\",\"link\":\"Tree组件\"},{\"text\":\"其他弹出层\",\"link\":\"其他弹出层\"},{\"text\":\"Tabs选项卡\",\"link\":\"Tabs选项卡\"},{\"text\":\"Menu菜单\",\"link\":\"Menu菜单\"},{\"text\":\"Menu菜单\",\"link\":\"Menu菜单\"}]},{\"text\":\"CSS解决方案\",\"base\":\"/react/CSS解决方案/\",\"items\":[{\"text\":\"CSS Module\",\"link\":\"CSS_Module\"}]},{\"text\":\"ahooks\",\"link\":\"/aHooks/\"},{\"text\":\"自定义Hooks\",\"base\":\"/react/自定义Hooks/\",\"items\":[{\"text\":\"useRouter\",\"link\":\"useRouter\"},{\"text\":\"useLoadScript\",\"link\":\"useLoadScript\"},{\"text\":\"useInputHistory\",\"link\":\"useInputHistory\"},{\"text\":\"useSetParticalState\",\"link\":\"useSetParticalState\"},{\"text\":\"useFormModal\",\"link\":\"useFormModal\"},{\"text\":\"useCopy\",\"link\":\"useCopy\"},{\"text\":\"useIntersection\",\"link\":\"useIntersection\"},{\"text\":\"useModal\",\"link\":\"useModal\"},{\"text\":\"useInterval\",\"link\":\"useInterval\"},{\"text\":\"useModal\",\"link\":\"useModal\"},{\"text\":\"useModal\",\"link\":\"useModal\"}]},{\"text\":\"React实战：设计模式和最佳实践\",\"base\":\"/react/React实战,设计模式与最佳实践/\",\"collapsed\":true,\"items\":[{\"text\":\"React的设计思想\",\"link\":\"React的设计思想\"},{\"text\":\"组件实践（1）：如何定义清晰可维护的接口\",\"link\":\"组件实践（1）：如何定义清晰可维护的接口\"},{\"text\":\"组件实践（2）：组件的内部实现\",\"link\":\"组件实践（2）：组件的内部实现\"},{\"text\":\"组件实践（3）：组件化样式\",\"link\":\"组件实践（3）：组件化样式\"},{\"text\":\"组件设计模式（1）：聪明组件和傻瓜组件\",\"link\":\"组件设计模式（1）：聪明组件和傻瓜组件\"},{\"text\":\"组件设计模式（2）：高阶组件\",\"link\":\"组件设计模式（2）：高阶组件\"},{\"text\":\"组件设计模式（3）：render props 模式\",\"link\":\"组件设计模式（3）：render props 模式\"},{\"text\":\"组件设计模式（4）：提供者模式\",\"link\":\"组件设计模式（4）：提供者模式\"},{\"text\":\"组件设计模式（5）：组合组件\",\"link\":\"组件设计模式（5）：组合组件\"},{\"text\":\"React 单元测试\",\"link\":\"React 单元测试\"},{\"text\":\"React 状态管理（1）：组件状态\",\"link\":\"React 状态管理（1）：组件状态\"},{\"text\":\"React 状态管理（2）：Redux 使用模式\",\"link\":\"React 状态管理（2）：Redux 使用模式\"},{\"text\":\"React 状态管理（3）：Mobx 使用模式\",\"link\":\"React 状态管理（3）：Mobx 使用模式\"},{\"text\":\"React 状态管理（4）：不同方式对比\",\"link\":\"React 状态管理（4）：不同方式对比\"},{\"text\":\"路由的魔法：React Router\",\"link\":\"路由的魔法：React Router\"},{\"text\":\"服务器端渲染（1）：基本套路\",\"link\":\"服务器端渲染（1）：基本套路\"},{\"text\":\"服务器端渲染（2):理解Nextjs\",\"link\":\"服务器端渲染（2）理解NextJS\"},{\"text\":\"React 的未来（1）： 拥抱异步渲染\",\"link\":\"React 的未来（1）： 拥抱异步渲染\"},{\"text\":\"React 的未来（2）：Suspense 带来的异步操作革命\",\"link\":\"React 的未来（2）：Suspense 带来的异步操作革命\"},{\"text\":\"React 的未来（3）：函数化的 Hooks\",\"link\":\"React 的未来（3）：函数化的 Hooks\"}]},{\"text\":\"React搞定复杂项目状态管理\",\"base\":\"/react/React搞定复杂项目状态管理/\",\"collapsed\":false,\"items\":[]},{\"text\":\"React后台管理系统项目实战\",\"base\":\"/react/React后台管理系统项目实战/\",\"collapsed\":false,\"items\":[]},{\"text\":\"慕课网最新React技术栈，实战复杂低代码项目-仿问卷星\",\"base\":\"/react/慕课网最新React技术栈，实战复杂低代码项目-仿问卷星/\",\"collapsed\":false,\"items\":[]},{\"text\":\"React状态管理\",\"base\":\"/react/状态管理/\",\"collapsed\":false,\"items\":[{\"text\":\"zustand\",\"link\":\"zustand\"},{\"text\":\"zustand翻译文档\",\"link\":\"zustand翻译文档\"}]},{\"text\":\"开发一个组件库\",\"base\":\"/react/开发一个组件库/\",\"items\":[{\"text\":\"如何完善组件单测\",\"link\":\"如何完善组件单测\"},{\"text\":\"handlebars模板\",\"link\":\"handlebars模板\"}]},{\"text\":\"React好用的插件\",\"base\":\"/react/React好用的插件/\",\"items\":[{\"text\":\"js-pinyin\",\"link\":\"js-pinyin\"},{\"text\":\"jsbarcode\",\"link\":\"jsbarcode\"},{\"text\":\"react-jsx-parse\",\"link\":\"react-jsx-parse\"},{\"text\":\"react-load-script\",\"link\":\"react-load-script\"},{\"text\":\"react-to-print\",\"link\":\"react-to-print\"},{\"text\":\"react-viewer\",\"link\":\"react-viewer\"},{\"text\":\"react-hook-form\",\"link\":\"react-hook-form\"},{\"text\":\"react-window-infinite-loader\",\"link\":\"react-window-infinite-loader\"},{\"text\":\"react-window-infinite-loader\",\"link\":\"react-window-infinite-loader\"},{\"text\":\"react-window-infinite-loader\",\"link\":\"react-window-infinite-loader\"}]}]},\"/typescript/\":{\"base\":\"/typescript/\",\"items\":[{\"text\":\"TypeScript\",\"base\":\"/typescript/\",\"collapsed\":false,\"items\":[{\"text\":\"Redux\",\"link\":\"Redux\"}]},{\"text\":\"TS 从入门到深度掌握，晋级TypeScript高手实战课程\",\"base\":\"/typescript/TS 从入门到深度掌握，晋级TypeScript高手实战课程/\",\"collapsed\":false,\"items\":[{\"text\":\"第10章TS声明文件，TS模块.md\",\"link\":\"第10章TS声明文件，TS模块\"}]},{\"text\":\"晋级TypeScript高手，成为抢手的前端开发人才\",\"base\":\"/typescript/晋级TypeScript高手，成为抢手的前端开发人才/\",\"collapsed\":false,\"items\":[{\"text\":\"第07章 泛型类+泛型接口+泛型类约束的复杂应用【无比重要的深度技能】\",\"link\":\"第07章 泛型类+泛型接口+泛型类约束的复杂应用【无比重要的深度技能】\"},{\"text\":\"第08章 深度掌握泛型函数、泛型函数重载【无比重要的深度技能】\",\"link\":\"第08章 深度掌握泛型函数、泛型函数重载【无比重要的深度技能】\"},{\"text\":\"第09章 深入infer、TS高级类型、泛型再进阶【全方位深度掌握 TS 泛型】\",\"link\":\"第09章 深入infer、TS高级类型、泛型再进阶【全方位深度掌握 TS 泛型】\"},{\"text\":\"第08章 深度掌握泛型函数、泛型函数重载【无比重要的深度技能】\",\"link\":\"第08章 深度掌握泛型函数、泛型函数重载【无比重要的深度技能】\"}]}]},\"/css3/\":{\"base\":\"/css3/\",\"items\":[{\"text\":\"现代web布局\",\"base\":\"/css3/现代web布局/\",\"collapsed\":false,\"items\":[{\"text\":\"Web 布局技术演进：了解 Web 布局发展史\",\"link\":\"01\"},{\"text\":\"现代 Web 布局技术术语\",\"link\":\"02\"},{\"text\":\"Flexbox 布局基础使用\",\"link\":\"03\"},{\"text\":\"Flexbox 布局中的对齐方式\",\"link\":\"04\"},{\"text\":\"Flexbox 布局中的 flex 属性的基础运用\",\"link\":\"05\"},{\"text\":\"Flexbox 中的计算：通过扩展因子比例来扩展 Flex 项目\",\"link\":\"06\"},{\"text\":\"Flexbox 中的计算：通过收缩因子比例收缩 Flex 项目\",\"link\":\"07\"},{\"text\":\"Flexbox 布局中的 flex-basis：谁能决定 Flex 项目的大小？\",\"link\":\"08\"},{\"text\":\"使用 Flexbox 构建经典布局：10 种经典 Web 布局\",\"link\":\"09\"},{\"text\":\"10\",\"link\":\"10\"}]},{\"text\":\"postcss\",\"base\":\"/css3/postcss/\",\"collapsed\":false,\"items\":[{\"text\":\"postcss-prefix-selector增加统一作用域\",\"link\":\"postcss-prefix-selector增加统一作用域\"}]}]},\"/electron/\":{\"base\":\"/electron/\",\"items\":[{\"text\":\"electron开发实战\",\"base\":\"/electron/electron开发实战/\",\"collapsed\":false,\"items\":[{\"text\":\"Electron 环境搭建+前期准备\",\"link\":\"electron环境搭建\"},{\"text\":\"开发一个简单版的番茄钟\",\"link\":\"开发一个简单版的番茄钟\"},{\"text\":\"APP特性\",\"link\":\"App特性\"},{\"text\":\"原生GUI\",\"link\":\"原生GUI\"},{\"text\":\"使用NodeJs调用原生模块\",\"link\":\"使用NodeJs调用原生模块\"},{\"text\":\"释放前端想象力\",\"link\":\"释放前端想象力\"},{\"text\":\"Electron优化白屏\",\"link\":\"electron优化白屏\"},{\"text\":\"Electron应用打包\",\"link\":\"electron应用打包\"}]},{\"text\":\"Electron数据持久化方案\",\"base\":\"/electron/数据持久化方案/\",\"collapsed\":false,\"items\":[{\"text\":\"electron-store\",\"link\":\"electron-store\"},{\"text\":\"数据持久缓存库lndb\",\"link\":\"数据持久缓存库lndb\"}]},{\"text\":\"react中开发踩坑\",\"link\":\"/electron/react中开发踩坑\"}]}},\"outline\":{\"level\":[2,6],\"label\":\"本页目录\"},\"docFooter\":{\"prev\":\"上一篇\",\"next\":\"下一篇\"},\"lastUpdated\":{\"text\":\"上次更新\"},\"returnToTopLabel\":\"返回顶部\",\"darkModeSwitchLabel\":\"外观\",\"sidebarMenuLabel\":\"归档\",\"editLink\":{\"pattern\":\"https://github.com/xxx\",\"text\":\"在 github 上编辑此页\"},\"search\":{\"provider\":\"local\",\"options\":{\"translations\":{\"button\":{\"buttonText\":\"搜索文档\",\"buttonAriaLabel\":\"搜索文档\"},\"modal\":{\"noResultsText\":\"无法找到相关结果\",\"resetButtonTitle\":\"清除查询条件\",\"footer\":{\"selectText\":\"选择\",\"navigateText\":\"切换\"}}}}}},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":true}");</script>
    
  </body>
</html>